body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
}
td { text-align: center; }
span { width: fit-content; }
video {
        width: 40rem;
        margin: 1rem 0;
}
.seek {
        margin: 0.2rem 0;
}
.seek .tc {
        color: blue;
        border-bottom: 1px solid blue;
        cursor: pointer;
}
.section {
        margin: 2rem 0;
}
.title   {
        font-size: 1.5rem;
}
.compare-sections .title {
        text-align: center;
        margin: 4rem 0 1rem 0;
}
.comparison .img {
        width: 20rem;
        height: 20rem;
        background-position: center center;
        background-size: cover;
}
.description {
        width: 40rem;
        margin-top: 0.5rem;
}
.log-sections {
        white-space: pre;
}
.nav {
        width: 100vw;
        padding: 1rem 0;
        background: #eee;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        position: sticky;
        top: 0;
}
.top-bleed {
        background: #eee;
}
.btn {
        background: #ccc;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
}
.btn:hover {
        background: #aaa;
}
.hide { display: none; }



.mobile-only { display: none; }
@media (max-aspect-ratio: 1.3/1) {
        .mobile-only { display: unset; }
        .no-mobile { display: none; }
        body {
                font-size: 0.9rem;
        }
        .title {
                font-size: 1.2rem;
        }
        .comparison .img {
                width: 10rem;
                height: 10rem;
        }
        .description {
                width: 20rem;
        }
        .log-sections {
                font-size: 0.8rem;
                padding-right: 1.5rem;
                box-sizing: border-box;
                margin-top: unset;
        }
        video { width: 20rem; }
        .seek {
                margin: 1rem 0;
        }
}