:root {
    --border-color: color-mix(in srgb, currentColor 50%, transparent);
    --text-color-hover: color-mix(in srgb, currentColor 10%, transparent);
    --background-color-hover: color-mix(in srgb, currentColor 15%, transparent);
}

html, body {
    color-scheme: light dark;
    max-inline-size: 80ch;
    margin: 0 auto;
    font-family: system-ui, sans-serif;
    padding: 1lh;
}

h2 {
    font-weight: normal;
}

a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2ex;

    &:hover {
        text-decoration: underline;
    }
}

details {
    margin-inline-start: -1ch;
    position: relative;

    & summary {
        --border-color: currentColor;
        padding: 0.5lh 1ch;
        cursor: pointer;
        max-inline-size: max-content;
        position: relative;

        &:hover {
            background: var(--background-color-hover);
        }
    }

    &:before,
    & summary::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        transform: scaleX(0);
        transform-origin: left;
        background: var(--border-color);
        transition: transform 120ms;
    }

    &:open {
        &::before,
        & summary::before {
            transform: scaleX(1);
        }

        &::details-content {
            padding-block-end: 1lh;
        }
    }
}

ul {
    margin-block: 0.5lh 0;
}

li {
    margin-block-end: 0.3ex;
}