:root {
            --bg-color: #e3e6ea;
            --text-color: #444d61;
            --fill-color: #fdfaf5;
            --stroke-color: #444d61;
        }

        html, body {
            margin: 0;
            overflow-x: clip;
        }

        body {
            background-color: var(--bg-color);
            font-family: serif, "univers-next-pro", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 0.9rem;
            color: var(--text-color);
            line-height: 1.4;
        }

        .scrolly-note {
            width: 100%;
            display: block;
            text-align: center;
            font-size: 0.8em;

        }

        .bike-viewport {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .spacer {
            height: auto;
            min-height: 50vh;
            width: 90%;
            margin: 0 auto;
            column-count: 3;
            column-gap: 40px;
        }

        .spacer h2 {
            break-after: avoid;
            column-span: all;
        }

        svg {
            width: 85%;
            height: auto;
            max-width: 600px;
            overflow: visible !important;
        }

        .loading svg {
            opacity: 0;
        }

        @media (max-width: 600px) {
            .spacer {
                column-count: 1;
                width: 85%;
            }

            .spacer h2 {
                font-size: 1.2rem;
            }

            .spacer p {
                font-size: 0.8rem;
            }
        }

        .parts-table {
            width: 90%;
            margin: 0 auto 4rem;
            color: var(--text-color);
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .parts-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .parts-table table tr td:first-child {
            border: none !important;
        }  

        .parts-table th,
        .parts-table td {
            text-align: left;
            vertical-align: top;
            padding: 10px 12px;
            border-bottom: 0.5px solid var(--stroke-color);
        }

        .parts-table th {
            font-weight: 600;
            position: sticky;
            top: 0;
            background: var(--bg-color);
            box-shadow: 0 2px 0 var(--stroke-color);
        }

        .parts-table td.part-image {
            width: 180px;
            text-align: right;
        }

        .parts-table td.part-image img {
            display: inline-block;
            object-fit: contain;
            background: #fdfaf5;
            padding: 2em;
            border: none;
            border-radius: 1em;
        }

        footer {
            padding: 10em 0;
        }

        @media (max-width: 600px) {
            .parts-table {
                width: 90%;
                font-size: 0.8rem;
                line-height: 1.4;
            }

            .parts-table thead {
                display: none;
            }

            .parts-table table,
            .parts-table tbody,
            .parts-table tr,
            .parts-table td {
                display: block;
                width: 100%;
            }

            .parts-table tr {
                padding: 30px 0;
                border-bottom: none;
            }

            .parts-table td {
                border-bottom: none;
                padding: 2px 0;
            }

            .parts-table td::before {
                content: attr(data-label) ": ";
                font-weight: 600;
            }

            .parts-table td.part-image::before {
                content: none;
            }

            .parts-table td.part-image,
            .parts-table td.part-image img {
                width: 100%;
                text-align: left;
            }
        }