.speed-test-workbench {
    overflow: hidden;
}

.speed-test-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin: 24px 28px 0;
    padding: 22px;
    border: 2px solid var(--ink);
    background: #fffefa;
}

.speed-test-intro strong {
    display: block;
    margin-bottom: 8px;
    font: 900 .82rem/1.2 "Arial Black", Arial, sans-serif;
    letter-spacing: .025em;
}

.speed-test-intro p {
    max-width: 820px;
    margin: 0;
    color: #4c4840;
    font: 400 .96rem/1.5 Georgia, "Times New Roman", serif;
}

.speed-test-provider-badge {
    flex: 0 0 auto;
    border: 2px solid var(--ink);
    background: var(--yellow);
    padding: 9px 11px;
    box-shadow: 3px 3px 0 var(--ink);
    font: 900 .62rem/1 "Courier New", monospace;
    letter-spacing: .05em;
    white-space: nowrap;
}

.speed-test-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr);
    gap: 18px;
    padding: 24px 28px 0;
}

.speed-test-url-field {
    margin: 0;
}

.speed-test-url-field input {
    min-height: 56px;
    font-size: 1rem;
}

.speed-test-strategy {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 2px solid var(--ink);
    background: var(--white);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.speed-test-strategy legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.speed-test-strategy label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    cursor: pointer;
}

.speed-test-strategy label + label {
    border-left: 2px solid var(--ink);
}

.speed-test-strategy input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--orange);
}

.speed-test-strategy span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.speed-test-strategy b {
    font: 900 .72rem/1 "Courier New", monospace;
}

.speed-test-strategy small {
    color: var(--muted);
    font: 400 .72rem/1.25 Georgia, "Times New Roman", serif;
}

.speed-test-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.speed-test-status {
    margin: 22px 28px 0;
}

.speed-test-status[data-state="working"] strong {
    background: var(--yellow);
}

.speed-test-results {
    margin: 28px;
    border-top: 4px solid var(--ink);
    padding-top: 24px;
    scroll-margin-top: 24px;
}

.speed-test-result-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 18px;
}

.speed-test-result-heading > div:first-child > span {
    color: #6b270f;
    font: 900 .66rem/1 "Courier New", monospace;
    letter-spacing: .08em;
}

.speed-test-result-heading h2 {
    margin: 5px 0 0;
    font: 900 clamp(1.8rem, 3.6vw, 3.2rem)/.95 "Arial Black", Arial, sans-serif;
    letter-spacing: -.035em;
}

.speed-test-tested-url {
    min-width: 0;
    max-width: 48%;
    display: grid;
    gap: 4px;
    text-align: right;
}

.speed-test-tested-url span {
    color: var(--muted);
    font: 900 .58rem/1 "Courier New", monospace;
    letter-spacing: .07em;
}

.speed-test-tested-url strong {
    overflow-wrap: anywhere;
    font: 700 .7rem/1.35 "Courier New", monospace;
}

.speed-score-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.speed-score-card {
    position: relative;
    min-width: 0;
    min-height: 168px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    align-items: center;
    justify-items: center;
    padding: 14px 12px 13px;
    border: 3px solid var(--ink);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--paper-deep);
    text-align: center;
}

.speed-score-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--paper-deep);
}

.speed-score-card[data-rating="good"]::before { background: var(--green); }
.speed-score-card[data-rating="needs-work"]::before { background: var(--yellow); }
.speed-score-card[data-rating="poor"]::before { background: #e94b35; }

.speed-score-short {
    justify-self: end;
    color: var(--muted);
    font: 900 .58rem/1 "Courier New", monospace;
}

.speed-score-value {
    align-self: center;
    font: 900 clamp(2.8rem, 5vw, 4.6rem)/1 "Arial Black", Arial, sans-serif;
    letter-spacing: -.06em;
}

.speed-score-name {
    font: 900 .66rem/1.15 "Courier New", monospace;
}

.speed-score-rating {
    margin-top: 7px;
    padding: 4px 6px;
    border: 1px solid var(--ink);
    background: var(--paper);
    font: 900 .52rem/1 "Courier New", monospace;
}

.speed-score-card[data-rating="good"] .speed-score-rating { background: var(--green); }
.speed-score-card[data-rating="needs-work"] .speed-score-rating { background: var(--yellow); }
.speed-score-card[data-rating="poor"] .speed-score-rating { background: #e94b35; color: var(--white); }

.speed-report-section {
    margin-top: 28px;
}

.speed-section-note {
    margin: 10px 0 14px;
    color: #514d44;
    font: 400 .9rem/1.45 Georgia, "Times New Roman", serif;
}

.speed-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.speed-metric-card {
    min-width: 0;
    min-height: 132px;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 13px;
    border: 2px solid var(--ink);
    background: #fffefa;
}

.speed-metric-card[data-rating="good"] { box-shadow: inset 0 6px 0 var(--green); }
.speed-metric-card[data-rating="needs-work"] { box-shadow: inset 0 6px 0 var(--yellow); }
.speed-metric-card[data-rating="poor"] { box-shadow: inset 0 6px 0 #e94b35; }

.speed-metric-code {
    justify-self: end;
    color: var(--muted);
    font: 900 .57rem/1 "Courier New", monospace;
}

.speed-metric-value {
    margin-top: 4px;
    font: 900 clamp(1.55rem, 2.6vw, 2.2rem)/1 "Arial Black", Arial, sans-serif;
    overflow-wrap: anywhere;
}

.speed-metric-name {
    font: 900 .62rem/1.2 "Courier New", monospace;
}

.speed-metric-rating {
    color: var(--muted);
    font: 800 .54rem/1.2 "Courier New", monospace;
}

.speed-recommendation-list {
    display: grid;
    gap: 10px;
}

.speed-recommendation {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    border: 2px solid var(--ink);
    background: #fffefa;
}

.speed-recommendation-number {
    display: grid;
    place-items: start center;
    padding-top: 15px;
    border-right: 2px solid var(--ink);
    background: var(--orange);
    font: 900 .72rem/1 "Courier New", monospace;
}

.speed-recommendation-copy {
    min-width: 0;
    padding: 14px 16px;
}

.speed-recommendation-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 7px 14px;
    margin-bottom: 7px;
}

.speed-recommendation-meta span,
.speed-recommendation-meta b {
    font: 900 .56rem/1.2 "Courier New", monospace;
    letter-spacing: .045em;
}

.speed-recommendation-meta span { color: #6b270f; }
.speed-recommendation-meta b { background: var(--yellow); border: 1px solid var(--ink); padding: 4px 6px; }

.speed-recommendation-title {
    display: block;
    font: 900 .84rem/1.25 "Arial Black", Arial, sans-serif;
}

.speed-recommendation-copy p {
    margin: 7px 0 0;
    color: #514d44;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font: 400 .82rem/1.45 Georgia, "Times New Roman", serif;
}

.speed-empty-state {
    grid-column: 1 / -1;
    display: grid;
    gap: 5px;
    padding: 18px;
    border: 2px dashed var(--ink);
    background: var(--paper);
    color: var(--muted);
    font: 700 .7rem/1.4 "Courier New", monospace;
}

.speed-empty-state strong {
    color: var(--ink);
    font: 900 .72rem/1.2 "Arial Black", Arial, sans-serif;
}

.speed-test-report-meta {
    display: grid;
    grid-template-columns: 1.3fr .7fr 1fr;
    margin-top: 28px;
    border: 2px solid var(--ink);
    background: var(--paper);
}

.speed-test-report-meta > div {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 12px 14px;
}

.speed-test-report-meta > div + div {
    border-left: 2px solid var(--ink);
}

.speed-test-report-meta span {
    color: var(--muted);
    font: 900 .54rem/1 "Courier New", monospace;
    letter-spacing: .06em;
}

.speed-test-report-meta strong {
    overflow-wrap: anywhere;
    font: 900 .62rem/1.3 "Courier New", monospace;
}

.speed-test-workbench > .privacy-note {
    margin-inline: 28px;
}

@media (max-width: 960px) {
    .speed-test-form { grid-template-columns: 1fr; }
    .speed-test-strategy { max-width: 560px; }
    .speed-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .speed-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .speed-test-intro {
        margin: 18px 16px 0;
        padding: 17px;
        flex-direction: column;
        gap: 14px;
    }

    .speed-test-provider-badge { align-self: flex-start; }

    .speed-test-form {
        padding: 18px 16px 0;
        gap: 14px;
    }

    .speed-test-strategy {
        max-width: none;
        grid-template-columns: 1fr;
    }

    .speed-test-strategy label + label {
        border-left: 0;
        border-top: 2px solid var(--ink);
    }

    .speed-test-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .speed-test-actions .button { width: 100%; }

    .speed-test-status { margin: 18px 16px 0; }

    .speed-test-status.tool-status {
        grid-template-columns: 1fr;
    }

    .speed-test-status.tool-status strong {
        min-width: 0;
        border-right: 0;
        border-bottom: 2px solid var(--ink);
    }

    .speed-test-results {
        margin: 24px 16px 18px;
        padding-top: 20px;
    }

    .speed-test-result-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .speed-test-tested-url {
        max-width: 100%;
        text-align: left;
    }

    .speed-score-grid { gap: 9px; }
    .speed-score-card { min-height: 148px; padding-inline: 9px; }
    .speed-score-value { font-size: clamp(2.5rem, 15vw, 3.5rem); }
    .speed-score-name { font-size: .58rem; }

    .speed-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .speed-metric-card { min-height: 122px; }

    .speed-recommendation {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .speed-recommendation-copy { padding: 13px 12px; }

    .speed-test-report-meta {
        grid-template-columns: 1fr;
    }

    .speed-test-report-meta > div + div {
        border-left: 0;
        border-top: 2px solid var(--ink);
    }

    .speed-test-workbench > .privacy-note { margin-inline: 16px; }
}

@media (max-width: 420px) {
    .speed-score-grid,
    .speed-metric-grid { grid-template-columns: 1fr; }
    .speed-score-card { min-height: 136px; }
}