<style>
    details[open] #scenario-details-button svg {
        transform: rotate(0deg);
    }

    details[open] #scenario-details-button #eye-close {
        display: block;
    }

    details[open] #scenario-details-button #eye-open {
        display: none;
    }

    #scenario-details-button #eye-open {
        display: block;
    }

    #scenario-details-button #eye-close {
        display: none;
    }

    #scenario-details-button svg {
        scale: 1.25;
        float: right;
        transition: all 0.25s ease-in-out;
    }

    /* === Root Variables === */
    :root {
        --primary-text-color: #1a1a1a;
        --secondary-text-color: #535353;

        --light-bg: #f9fafb;
        --hover-bg: #f3f4f6;
        --hover-dark: #e5e7eb;

        --passed-fg: #15803d;
        --passed-bg: #dcfce7;
        --skipped-fg: #eab308;
        --skipped-bg: #fffbeb;
        --failed-fg: #b91c1c;
        --failed-bg: #fee2e2;
    }

    /* === Base === */
    body {
        font-family: 'Roboto', sans-serif;
        padding: 2rem 4rem;
        background: #f5f6f7;
        color: var(--primary-text-color);
    }

    h1 {
        font-size: 2rem;
        font-weight: 400;
        margin-bottom: 0.25rem;
    }

    h2 {
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 400;
    }

    /* === Typography Utilities === */
    .primary-text {
        font-size: 1rem;
        color: var(--primary-text-color);
    }

    .secondary-text {
        color: var(--secondary-text-color);
    }

    .important-text {
        font-size: 1.25rem;
    }

    .monospace {
        font-family: monospace;
    }

    .bold {
        font-weight: 500;
    }

    .semi-bold {
        font-weight: 400;
    }

    .text-right {
        text-align: right;
    }

    .no-margin {
        margin: 0;
    }

    /* === Flex Utilities === */
    .flex-between {
        display: flex;
        justify-content: space-between;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
    }

    .flex-center {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* === Layout & Containers === */
    .container {
        background-color: white;
        padding: 1rem;
        border-radius: 0.625rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .feature-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .feature {
        display: flex;
        justify-content: space-between;
        align-items: first baseline;
        width: 100%;
    }

    .scenario {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: 1;
        padding: 1rem;
        border-radius: 0.625rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .scenario-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .step-container {
        display: flex;
        justify-content: space-between;
        align-self: stretch;
        margin-left: 1.5rem;
    }

    /* === Status Color Blocks === */
    .scenario-passed {
        border: 1.5px solid var(--passed-fg);
        background: var(--passed-bg);
    }

    .scenario-skipped {
        border: 1.5px solid var(--skipped-fg);
        background: var(--skipped-bg);
    }

    .scenario-failed {
        border: 1.5px solid var(--failed-fg);
        background: var(--failed-bg);
    }

    /* === Badges === */
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        color: white;
    }

    .badge-passed {
        background: var(--passed-fg);
    }

    .badge-skipped {
        background: var(--skipped-fg);
        color: var(--primary-text-color);
    }

    .badge-failed {
        background: var(--failed-fg);
    }

    /* === Feature Table === */
    table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort)::after {
        content: " \25B4\25BE";
    }

    .feature-table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .feature-table thead {
        background-color: transparent;
        color: var(--secondary-text-color);
        font-size: 0.85rem;
        text-align: left;
    }

    .feature-table thead tr {
        border-bottom: 1px solid var(--hover-dark);
    }

    .feature-table th,
    .feature-table td {
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .feature-table th:first-child {
        text-align: left;
    }

    .feature-table tbody tr {
        transition: background-color 0.2s ease;
    }

    .feature-table tbody tr:hover {
        background-color: var(--light-bg);
    }

    .feature-table-link {
        color: var(--primary-text-color);
        text-decoration: underline;

        text-align: start;
        flex-shrink: 0;
    }

    .feature-table-data.passed {
        color: var(--passed-fg);
        font-weight: 500;
    }

    .feature-table-data.failed {
        color: var(--failed-fg);
        font-weight: 500;
    }

    .feature-table-data.skipped {
        color: var(--skipped-fg);
        font-weight: 500;
    }

    /* === Buttons === */
    .button {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.75rem;
        background-color: white;
        color: var(--primary-text-color);
        border: none;
        margin: 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .button:hover {
        background-color: var(--light-bg);
    }

    .button:active {
        background-color: var(--hover-bg);
    }

    /* === Filter Chips === */
    .filter-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .chip-container {
        display: flex;
        gap: 1rem;
        padding: 0.5rem;
        border-radius: 99px;
    }

    .chip-input {
        display: none;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.35rem 0.75rem;
        border-radius: 99px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        border: 1.5px solid transparent;
        background-color: var(--hover-bg);
        color: var(--secondary-text-color);
        transition: all 0.25s ease;
    }

    .chip:hover {
        background-color: var(--hover-dark);
    }

    .chip-icon {
        width: 1rem;
        height: 1rem;
        color: #999;
        transition: color 0.25s ease;
    }

    .icon-on,
    .icon-off {
        display: none;
    }

    .chip-input:checked+.chip .icon-on {
        display: inline-block;
    }

    .chip-input:not(:checked)+.chip .icon-off {
        display: inline-block;
    }

    .chip-input:checked+.chip.passed {
        background-color: var(--passed-bg);
        border-color: var(--passed-fg);
        color: var(--passed-fg);
    }

    .chip-input:checked+.chip.failed {
        background-color: var(--failed-bg);
        border-color: var(--failed-fg);
        color: var(--failed-fg);
    }

    .chip-input:checked+.chip.skipped {
        background-color: var(--skipped-bg);
        border-color: var(--skipped-fg);
        color: var(--skipped-fg);
    }

    .chip-input:checked+.chip.passed .chip-icon {
        color: var(--passed-fg);
    }

    .chip-input:checked+.chip.failed .chip-icon {
        color: var(--failed-fg);
    }

    .chip-input:checked+.chip.skipped .chip-icon {
        color: var(--skipped-fg);
    }

    /* === Modal === */
    .modal-dialog {
        border: none;
        padding: 0;
        background: none;
        animation: fadeIn 0.3s ease;
    }

    .modal-dialog::backdrop {
        background: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(2px);
        animation: backdropFade 0.3s ease;
    }

    .modal-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 2rem;
        border-radius: 0.75rem;
        background: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        animation: scaleIn 0.25s ease;
        min-width: 320px;
        max-width: 500px;
        margin: auto;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 1.25rem;
        margin: 0;
    }

    .modal-close {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.375rem;
        transition: background-color 0.2s ease;
    }

    .modal-close:hover {
        background-color: var(--hover-bg);
    }

    .modal-body {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        max-height: 300px;
        overflow-y: auto;
    }

    .modal-link {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        color: var(--secondary-text-color);
        text-decoration: none;
        padding: 0.5rem;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease;
        line-height: 1.4;
    }

    .modal-link:hover {
        background-color: var(--light-bg);
    }

    .modal-link svg {
        flex-shrink: 0;
        width: 14px;
        height: 15px;
        margin-top: 0.2rem;
    }

    /* === Return to Top Button === */
    .return-to-top-button {
        position: fixed;
        z-index: 10;
        bottom: 1rem;
        right: 1rem;
        font-size: 1rem;
        text-decoration: none;
        gap: 0;
    }

    .return-to-top-text {
        max-width: 0;
        display: inline;
        opacity: 0;
        white-space: nowrap;
        overflow: hidden;
        transition: max-width 0.4s ease, opacity 0.5s ease, padding 0.3s ease;
    }

    .return-to-top-button:hover .return-to-top-text {
        max-width: 10rem;
        opacity: 1;
        padding-right: 0.5rem;
    }

    /* === Animations === */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes backdropFade {
        from {
            background: rgba(0, 0, 0, 0);
        }

        to {
            background: rgba(0, 0, 0, 0.25);
        }
    }

    @keyframes scaleIn {
        from {
            transform: scale(0.95);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* === Stats Section === */
    .test-summary {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
    }

    .stat-card {
        background-color: var(--light-bg);
        border-radius: 0.35rem;
        padding: 1rem;
        text-align: center;
        min-width: 5rem;
    }

    .stat-label {
        font-size: 0.75rem;
        color: var(--secondary-text-color);
        margin: 0 0 0.25rem 0;
        text-transform: uppercase;
    }

    .stat-value {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        color: var(--primary-text-color);
    }

    .stat-card.passed {
        background-color: var(--passed-bg);
    }

    .stat-card.failed {
        background-color: var(--failed-bg);
    }

    .stat-card.skipped {
        background-color: var(--skipped-bg);
    }

    .stat-card.passed .stat-value {
        color: var(--passed-fg);
    }

    .stat-card.failed .stat-value {
        color: var(--failed-fg);
    }

    .stat-card.skipped .stat-value {
        color: var(--skipped-fg);
    }
</style>