:root {
    color-scheme: light dark;
    --asv-background: #ffffff;
    --asv-muted: #666666;
    --asv-panel: #f6f8fa;
    --asv-border: #d0d7de;
    --asv-accent: #0969da;
    --asv-hover: #eaeef2;
    --asv-selection: #0969da;
    --asv-selection-text: #ffffff;
}

.benchmark-home {
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px 30px 10px;
}

.benchmark-introduction {
    max-width: 760px;
    margin-bottom: 24px;
}

.benchmark-introduction h1 {
    margin: 4px 0 8px;
    font-size: 32px;
    font-weight: 600;
}

.benchmark-introduction p {
    color: var(--asv-muted);
    font-size: 16px;
}

.benchmark-introduction .benchmark-eyebrow {
    margin: 0;
    color: var(--asv-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.runtime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.runtime-card {
    min-height: 112px;
    padding: 16px;
    color: inherit;
    background: var(--asv-panel);
    border: 1px solid var(--asv-border);
    border-radius: 8px;
}

.runtime-card:hover,
.runtime-card:focus {
    color: inherit;
    text-decoration: none;
    border-color: var(--asv-accent);
}

.runtime-card strong,
.runtime-card span {
    display: block;
}

.runtime-card strong {
    margin-bottom: 6px;
    color: var(--asv-accent);
    font-size: 16px;
}

.runtime-card span {
    color: var(--asv-muted);
    line-height: 1.45;
}

.machine-overview {
    margin-bottom: 28px;
}

.machine-overview h2 {
    margin-bottom: 4px;
    font-size: 22px;
}

.machine-overview > p {
    color: var(--asv-muted);
}

.machine-table {
    margin-bottom: 0;
    background: var(--asv-panel);
    border: 1px solid var(--asv-border);
}

.machine-table > thead > tr > th,
.machine-table > tbody > tr > th,
.machine-table > tbody > tr > td {
    padding: 10px 12px;
    vertical-align: middle;
    border-color: var(--asv-border);
}

.machine-table > tbody > tr > th {
    font-weight: 600;
}

#benchmark-navigation {
    padding: 16px 0;
    border-top: 1px solid var(--asv-border);
    border-bottom: 1px solid var(--asv-border);
}

.btn-default:hover,
.btn-default:focus {
    color: inherit;
    background-color: var(--asv-hover);
    border-color: var(--asv-border);
}

.btn-default:active,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus {
    color: var(--asv-selection-text);
    background-color: var(--asv-selection);
    border-color: var(--asv-selection);
}

#benchmark-category-filters {
    display: inline-block;
    margin-left: 12px;
}

.benchmark-group {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 700px) {
    .benchmark-home {
        padding: 24px 15px 8px;
    }

    #benchmark-category-filters {
        display: block;
        margin: 10px 0 0;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --asv-background: #0d1117;
        --asv-muted: #8b949e;
        --asv-panel: #161b22;
        --asv-border: #30363d;
        --asv-accent: #58a6ff;
        --asv-hover: #30363d;
        --asv-selection: #1f6feb;
        --asv-selection-text: #ffffff;
    }

    html,
    body,
    #summarygrid-display,
    #summarylist-display,
    #graph-display,
    #regressions-display,
    .modal-content {
        color: #c9d1d9;
        background-color: var(--asv-background);
    }

    a,
    .navbar-default .navbar-link,
    .nav-list > li > a,
    #summarylist-body table tbody td.change a {
        color: #58a6ff;
    }

    .navbar-default,
    .panel,
    .panel-default,
    .modal-content {
        background-color: #161b22;
        border-color: #30363d;
    }

    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-brand,
    .navbar-default .navbar-text {
        color: #c9d1d9;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    nav li.active span.navbar-brand,
    nav li.active span.navbar-brand:hover,
    .panel-default > .panel-heading,
    .panel-heading {
        color: #f0f6fc;
        background-color: #21262d;
        border-color: #30363d;
    }

    .btn-default,
    #range,
    .form-control {
        color: #c9d1d9;
        background-color: #161b22;
        border-color: #30363d;
    }

    .nav-list > li > a:focus {
        color: #c9d1d9;
        background-color: #30363d;
    }

    .benchmark-container:hover,
    #regressions-body table.ignored,
    #summarylist-body table.ignored {
        background-color: #161b22;
    }

    .benchmark-text,
    .flot-tick-label,
    .axisLabels,
    .legendLabel {
        color: #c9d1d9;
    }

    .legend > div {
        background-color: #161b22 !important;
    }

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td,
    .modal-header,
    .modal-footer {
        border-color: #30363d;
    }

    #summarylist-body table tbody td.positive-change {
        background-color: #5a1e24;
    }

    #summarylist-body table tbody td.negative-change {
        background-color: #164b2c;
    }

    .tooltip-inner,
    .popover,
    .popover-title {
        color: #f0f6fc;
        background-color: #21262d;
        border-color: #30363d;
    }
}
