*, *::before, *::after {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

:root {
    --font-monospace  : 'Fira Code', 'Menlo', 'Courier New', monospace;
    --font-comments   : 'Nova Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    --font-title      : 'Vina Sans', system-ui, 'Arial', sans-serif;
    --font            : 'Roboto', Georgia, system-ui, 'Arial', sans-serif;
    --bg              : #e5e5e5;
    --surface         : #fff;
    --border          : #e4e4e0;
    --text            : #1a1a18;
    --muted           : #6b6b65;
    --accent          : #5f018d;
    --accent-bg       : #eff6ff;
    --accent-hover    : #9a1dd8;
    --accent-dark     : oklch(from var(--accent) calc(l * .9) c h);
    --accent-body     : oklch(from #cb66ec calc(l * .2) c h);
    --code-bg         : #fff2;
    --gap             : 1.5rem;
    --pre-bg          : #1e1e2e;
    --pre-text        : #cdd6f4;
    --pre-border      : #313244;
    --pre-draw        : #0002;
    --text-shadow     : #0002;
    --comments-bg     : #eee;
    --comments-bg2    : #fafafa;
    --footer-bg       : oklch(from var(--accent-dark) calc(l * .4) c h);

    --startTime       : 0s;
    --animation       : 360s var(--startTime) infinite colorH steps(360);
    --sidebar         : 220px;

    --section-padding : 50px;
    --comment-margin  : min(100px, 5vw);
    --radiusHeader    : 7px;

    @media (prefers-color-scheme : dark) {
        --bg           : #333;
        --surface      : #222;
        --border       : #444;
        --muted        : #6b6b65;
        --accent       : #cb66ec;
        --accent-bg    : #000;
        --accent-hover : #1d4ed8;
        --accent-dark  : oklch(from var(--accent) calc(l * .5) c h);

        --text         : #e8e8e4;
        --text-shadow  : #000;
        --comments-bg  : #111;
        --comments-bg2 : #000;
    }

    /* contrast-color() ha supporto parziale: dove c'è, il colore del testo
       si calcola dal fondo e i fallback statici qui sopra vengono scavalcati.
       Va dichiarato per ultimo: a parità di specificità vince l'ordine. */
    @supports (color: contrast-color(red)) {
        --text : contrast-color(var(--bg));
    }
}

html:has(.dark input:checked) {
    --bg           : #333;
    --surface      : #222;
    --border       : #444;
    --muted        : #6b6b65;
    --accent       : #cb66ec;
    --accent-bg    : #000;
    --accent-hover : #1d4ed8;
    --accent-dark  : oklch(from var(--accent) calc(l * .5) c h);

    --text         : #e8e8e4;
    --text-shadow  : #000;
    --comments-bg  : #111;
    --comments-bg2 : #000;
}

html {
    scroll-behavior : smooth;
}

body {
    font-family : var(--font);
    box-shadow  : 200px 0px 100px -40px inset #000, -200px 0px 100px -40px inset #000;
    line-height : 1.7;
    font-size   : 1.0625rem;
    position    : relative;
    background  : #000;

    &:before {
        content         : '';
        position        : fixed;
        top             : 0;
        left            : 0;
        right           : 0;
        bottom          : 0;
        background      : linear-gradient(to bottom, transparent 50%, var(--accent-dark) 50%), linear-gradient(to right, var(--accent) 50%, #000 50%);
        animation       : var(--animation);
        z-index         : -2;
        background-size : 10px 10px, 10px 10px;
        will-change     : filter;
        inset           : 0;
        opacity         : .2;
    }

    section {

        min-width : 300px;
        > header {
            box-shadow  : 0 0 10px #000;
            max-width   : 900px;
            margin      : auto;
            position    : sticky;
            height      : 3rem;
            top         : 0;
            color       : contrast-color(var(--accent-dark));
            animation   : var(--animation);
            z-index     : 10;
            line-height : 3rem;

            overflow-x  : clip;

            .brand {
                color      : white;
                z-index    : 5;
                position   : relative;
                background : var(--accent-dark);
                animation  : none;
                width      : 100%;
                height     : 3rem;
                display    : inline-block;
                box-shadow : 0 0 20px #000;
                padding    : 0 1rem;
                @media (min-width : 900px) {
                    border-radius : var(--radiusHeader);
                    corner-shape  : scoop;
                }
            }

            &:has(.toggle input:checked) {

                nav {
                    margin-top : -3rem;
                    transform  : translateY(0);
                }
            }
            label.toggle {
                z-index    : 5;
                position   : absolute;
                @media (min-width : 900px) {
                    border-radius : 0 var(--radiusHeader) var(--radiusHeader) 0;
                    corner-shape  : scoop;
                }
                right      : 0;
                top        : 0;
                width      : 3rem;
                height     : 3rem;
                background : #fff;
                text-align : center;
                cursor     : pointer;
                &:before {
                    color      : #000;
                    content    : '≡';
                    font-size  : 3rem;
                    transition : .2s;
                    display    : block;
                }
                &:has(input:checked) {
                    &:before {
                        transform : rotate(90deg);
                    }
                }

                input {
                    visibility : hidden;
                    position   : absolute;
                }

            }
            label.dark {
                display:none;
                z-index          : 5;
                position         : absolute;
                right            : 3rem;
                top              : 0;
                width            : 3rem;
                height           : 3rem;
                cursor           : pointer;
                transform-origin : .5rem center;
                transition       : .2s all;
                &:hover {
                    transform : scale(1.5);
                }
                &:before {
                    color       : #000;
                    content     : '☼';
                    text-shadow : 1px 1px 1px #fff;
                }
                &:has(input:checked) {
                    &:before {
                        color       : #fff;
                        text-shadow : 1px 1px 1px #000;
                    }
                }
                input {
                    visibility : hidden;
                    position   : absolute;
                }
            }

            nav {
                padding    : 2rem 0;
                background : var(--accent-body);
                transform  : translateY(-500vh);
                max-height : 100vh;
                overflow   : auto;
                transition : .5s all;
                z-index    : 2;
                max-width  : 800px;
                margin     : auto;
                box-shadow : 0 0 20px #000;

                > ul {
                    @media (min-width : 600px) {
                        column-count : 2;
                    }

                    > li {
                        break-inside : avoid;
                        &:first-child .menu-group-label {visibility : hidden}
                    }
                }
                a {
                    color     : #fff !important;
                    animation : none !important;
                    font-size : .9rem;
                }

                /* Menu groups */
                .menu-group {
                    list-style  : none;
                    line-height : 1.5;
                    font-size   : .8rem;

                    .menu-group-label {
                        display        : block;
                        font-size      : 0.7rem;
                        text-transform : uppercase;
                        letter-spacing : 0.06em;
                        color          : #fff9;
                        padding        : 0.75rem 0.6rem 0.2rem;
                    }

                    > ul {
                        padding-left : 0.5rem;
                    }
                }

            }
        }

        > main {
            @supports (corner-shape: bevel) {
                border-radius : 0 0 0 250px / 0 0 0 100px;
                corner-shape  : bevel;
                position      : relative;
                &:after {
                    content       : '';
                    display       : block;
                    position      : absolute;
                    height        : 100px;
                    width         : 100%;
                    border-radius : 0 0 0 250px / 0 0 0 100px;
                    corner-shape  : bevel;
                    animation     : var(--animation);
                    left          : 0;
                    bottom        : 0;
                    border-bottom : 20px solid var(--accent-dark);
                }
            }

            max-width  : 800px;
            margin     : auto;
            padding    : 3rem var(--section-padding) 10rem;
            background : var(--bg);
            color      : var(--text);
            box-shadow : 0 0 10px 0 #000, 0 40px 20px -30px #0008;

            h2, h3, h4, h5, h6 {
                position : relative;

                &::before, &::after {
                    content          : '';
                    display          : block;
                    position         : absolute;
                    left             : -80px;
                    width            : 60px;
                    bottom           : 0;
                    height           : 2.5rem;
                    animation        : var(--animation);
                    transform-origin : bottom left;
                    transition       : .5s all;
                }

                &::before {
                    background    : red;
                    background    : linear-gradient(to right, oklch(from var(--accent-dark) .6 c h), oklch(from var(--accent-dark) .35 c h));
                    box-shadow    : 5px 3px 6px -1px #0009;
                    outline       : 1px solid #fff7;
                    border-radius : 3px 5px 5px 3px;
                }

                &:after {
                    background : oklch(from var(--accent-dark) .5 c h);
                    transform  : rotate(20deg);
                    z-index    : -1;
                    bottom     : 0;
                }

                &.current {
                    &::before {
                        width            : 70px;
                        transform-origin : bottom left;
                        transform        : rotate(-10deg);
                        box-shadow       : 5px 8px 8px -1px #0009;
                    }
                }
            }
            .footer-page {
                text-align : right;
                opacity    : .6;
                font-size  : 0.8rem;
                margin-top : 4rem;
                font-style : italic;

                span {
                    font-weight : bold;
                }
            }

        }

        h1 {
            margin-bottom : 0.5rem;
            line-height   : 1.25;
            font-family   : var(--font-title);
            text-shadow   : 4px 4px 1px var(--text-shadow);
            font-size     : 3rem;
            color         : var(--accent);
            animation     : var(--animation);
        }

        .subtitle {
            font-size     : 1.5rem;
            color         : var(--accent);
            margin-bottom : 0.5rem;
            font-style    : italic;
            line-height   : 1.2;
            animation     : var(--animation);
        }

        .article-meta {
            display        : flex;
            gap            : 1.2rem;
            font-size      : 0.85rem;
            color          : var(--muted);
            margin-bottom  : 1.5rem;
            padding-bottom : 1rem;
            border-bottom  : 1px solid var(--border);
        }

        h2 {
            text-shadow : 3px 3px 1px var(--text-shadow);
            font-size   : 1.4rem;
            margin      : 4rem 0 0.6rem;
            font-weight : 900;
        }

        h3 {
            text-shadow : 2px 2px 1px var(--text-shadow);
            font-size   : 1.15rem;
            margin      : 3.5rem 0 0.4rem;
        }

        h4 {
            font-size : 1rem;
            margin    : 2.5rem 0 0.4rem;
        }

        p {
            margin-bottom : 1rem;
        }

        ul, ol {
            margin : 0.5rem 0 1rem 1.5rem;

            li {
                margin-bottom : 0.25rem;
            }
        }

        ul.menulist {
            line-height : 1.2;

            li {
                margin-bottom : 1rem;
            }

            small {
                opacity : .5;
            }
        }

        blockquote {
            border-left   : 3px solid var(--accent);
            padding       : 0.5rem 1rem;
            color         : var(--text);
            margin        : 1rem 0 1rem 2rem;
            font-style    : italic;
            box-shadow    : 3px 3px 3px #000;
            background    : rgba(from var(--text) r g b/.1);
            position      : relative;
            outline       : 1px solid rgba(from var(--text) r g b/.3);
            transform     : skew(10deg);
            line-height   : 1.3;
            border-radius : 10px;
            animation     : var(--animation);

            p {
                margin : 0;
            }
        }

        hr {
            border     : none;
            border-top : 1px solid var(--border);
            margin     : 2rem 0;
        }

        a {
            color     : var(--accent);
            animation : var(--animation);

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

        em {
            color     : var(--accent);
            animation : var(--animation);
        }

        > #comments {
            color     : var(--text);
            max-width : 850px;
            padding   : 0 var(--section-padding);
            margin    : auto;

            #commenti {
                color : #fff;
            }

            .comment {
                background    : var(--surface);
                outline       : 1px solid var(--border);
                border-radius : 6px;
                overflow      : hidden;
                @supports (corner-shape: scoop) {
                    corner-shape  : bevel bevel scoop scoop;
                    border-radius : 10px;
                }
                padding       : 1rem;
                margin        : 1rem var(--comment-margin) 1px 0;

                .meta {
                    font-size       : 0.85rem;
                    color           : var(--muted);
                    margin          : -1rem -1rem 0.5rem -1rem;
                    padding         : .5rem 1rem;
                    background      : var(--bg);
                    position        : relative;
                    display         : flex;
                    justify-content : space-between;

                    strong {
                        color        : var(--text);
                        padding-left : 30px;
                    }

                    img {
                        width         : 30px;
                        position      : absolute;
                        left          : 3px;
                        top           : 4px;
                        border-radius : 50%;
                        @supports (corner-shape: scoop) {
                            corner-shape  : bevel;
                            border-radius : 10px 0 0 0 ;
                        }
                    }
                }

                p {
                    margin    : 0;
                    font-size : 0.95rem;
                }

                &:has(+[data-user="chalda"]) {
                    padding-bottom : 3rem;
                }
                &[data-user="chalda"] {
                    &:not(:nth-child(2)) {
                        margin-top : -2rem;
                    }

                    box-shadow   : -5px -5px 4px #0005;
                    margin-left  : var(--comment-margin);
                    margin-right : calc(var(--comment-margin) / 2);

                    position     : relative;

                    &:before {
                        content       : '';
                        outline       : 3px solid var(--accent-dark);
                        position      : absolute;
                        top           : 0;
                        left          : 0;
                        right         : 0;
                        bottom        : 0;
                        animation     : var(--animation);
                        border-radius : 6px;
                    }

                    .meta {
                        &:before {
                            content    : '';
                            position   : absolute;
                            background : var(--accent-dark);
                            top        : 0;
                            left       : 0;
                            right      : 0;
                            bottom     : 0;
                            z-index    : 1;
                            animation  : var(--animation);
                        }

                        * {
                            z-index : 2;
                        }

                        strong {
                            color : #fff;
                        }

                        time {
                            color : #fff9;
                        }
                    }
                }
            }

            .comment-form {
                margin        : 5rem auto;
                background    : var(--surface);
                padding       : 2rem;
                border-radius : 20px;
                box-shadow    : 0 0 20px 0 #000;

                @supports (corner-shape: scoop) {
                    corner-shape : bevel bevel scoop scoop;

                }

                h3 {
                    margin : 0 0 1rem;
                }

                label {
                    display       : block;
                    margin-bottom : 1rem;
                    font-size     : 0.9rem;
                    color         : var(--muted);
                }

                input,
                textarea {
                    display       : block;
                    width         : 100%;
                    margin-top    : 0.3rem;
                    padding       : 0.55rem 0.75rem;
                    border        : 1px solid var(--border);
                    border-radius : 4px;
                    font-family   : inherit;
                    font-size     : 0.95rem;
                    background    : var(--bg);
                    color         : var(--text);
                    transition    : border-color 0.15s;

                    &:focus {
                        outline      : none;
                        border-color : var(--accent);
                    }
                }

                textarea {
                    resize     : vertical;
                    min-height : 120px;
                }

                .form-row {
                    display : flex;
                    gap     : 1rem;

                    label {
                        flex : 1;
                    }

                    @media (max-width : 700px) {
                        flex-direction : column;
                    }
                }

                button {
                    padding       : 0.6rem 1.4rem;
                    background    : var(--accent);
                    color         : #fff;
                    border        : none;
                    border-radius : 4px;
                    font-size     : 0.95rem;
                    cursor        : pointer;
                    animation     : var(--animation);

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

        }
        code:not(pre code) {
            background    : var(--pre-bg);
            color         : #fff;
            font-size     : .8rem;
            padding       : 3px 5px;
            white-space   : nowrap;
            margin        : 0 3px;
            border-radius : 2px;
            user-select   : all;

        }
        pre {
            background    : var(--pre-bg);
            border        : 1px solid var(--border);
            border-radius : 6px;
            @supports (corner-shape: scoop) {
                corner-shape  : bevel bevel scoop scoop;
                border-radius : 10px;
            }
            padding       : 0;
            margin        : 1rem 0;
            font-size     : 0.85rem;
            color         : var(--pre-text);
            border-color  : var(--pre-border);
            position      : relative;
            font-family   : var(--font-monospace);

            &::before {
                content        : attr(title);
                display        : flex;
                align-items    : center;
                position       : relative;
                font-weight    : 500;
                letter-spacing : 0.025ch;
                color          : #fff4;
                background     : #0003;
                border-bottom  : none;
                font-size      : .8rem;
                padding        : .3rem 1rem;
                border-radius  : 10px;
                @supports (corner-shape: scoop) {
                    corner-shape  : bevel ;
                    border-radius : 10px 10px 0 0;
                }
            }

            footer {
                background      : #000;
                display         : flex;
                justify-content : space-between;

                .text {
                    font-size : .8rem;
                    padding   : 1rem;
                    opacity   : 0;

                    time {
                        opacity      : .4;
                        margin-right : 1rem;
                    }

                    .error {
                        color : red;
                    }

                    .info {
                        background : #fff3;
                        padding    : 10px;

                        s, mark {
                            padding       : 3px 2px;
                            margin        : 2px;
                            border-radius : 10px;
                            color         : #fff;
                        }

                        mark {
                            background : #ffff003b;
                            outline    : 1px solid yellow;
                        }

                        span.replaced {
                            display        : inline-flex;
                            flex-direction : column;
                            vertical-align : bottom;

                            s {
                                color           : #ff2e2e;
                                line-height     : 0;
                                font-size       : 80%;
                                text-decoration : none;
                            }
                        }
                    }
                }

                .play {
                    max-width       : 20px;
                    height          : 20px;
                    padding         : 14px;
                    display         : flex;
                    justify-content : center;
                    align-items     : center;
                    cursor          : pointer;
                    position        : absolute;
                    top             : 0;
                    right           : 10px;

                    &:hover {
                        color     : var(--accent);
                        animation : var(--animation);
                    }
                }
            }

            &:has(> code.language-boxdrawing) {
                line-height : 1.49;
                text-align  : center;
            }

            code {
                overflow-x  : auto;
                display     : block;
                padding     : 1rem;
                font-family : var(--font-monospace);
                [contenteditable] {
                    padding : 0 2px;
                }

                .c_comment {
                    opacity     : .5;
                    font-style  : italic;
                    font-family : var(--font-comments);
                }

                .c_muted { opacity : .5; }

                .c_keyword { color : #b56f46; }
                .c_command { color : #2c70d6; }
                .c_numbers { color : #29abb5; }
                .c_strings { color : #6aab73; }
                .c_defined { color : #9876aa; }
                .c_regexps { color : #eb4559; }

                .c {
                    --h         : 0;
                    --o         : 1;
                    --b         : 0;
                    --s         : 5px;
                    color       : #199300;
                    opacity     : var(--o);
                    filter      : hue-rotate(calc(1deg * var(--h)));
                    font-weight : bold;
                    text-shadow : 0 0 #0000,
                    calc(var(--b) * -1px) 0 calc(var(--b) * var(--s)) currentColor,
                    calc(var(--b) * +1px) 0 calc(var(--b) * var(--s)) currentColor,
                    0 calc(var(--b) * -1px) calc(var(--b) * var(--s)) currentColor,
                    0 calc(var(--b) * +1px) calc(var(--b) * var(--s)) currentColor;

                }
            }
        }
        > footer {

            /*background : var(--footer-bg);*/
            /*box-shadow : 0 -10px 60px #000;*/
            text-align : center;
            font-size  : .8rem;
            padding    : 5rem;
            color      : #fff8;
            color      : rgba(from contrast-color(var(--footer-bg)) r g b / .5);
            animation  : var(--animation);
            code {
                color      : var(--accent) !important;
                background : none !important;
                padding    : 0 !important;
            }

        }

    }

    [data-tooltip] {

        font-weight  : normal;
        padding-left : 4px;
        position     : relative;

        /* Tutto lo stile del fumetto sta sullo stato base: l'hover cambia solo
           transform/opacity, così la transition anima anche il ritorno */

        &::after {
            font-size        : .8rem;
            content          : attr(data-tooltip);
            position         : absolute;
            background       : var(--text);
            /* fallback: la riga sotto viene scartata dove contrast-color() manca */
            color            : var(--bg);
            color            : contrast-color(var(--text));
            text-shadow      : none;
            padding          : 1px 3px 12px 0;
            border-radius    : 3px;
            bottom           : 100%;
            width            : 150px;
            line-height      : 1.2;
            left             : calc(50% - 150px / 2);
            text-align       : center;

            box-sizing       : border-box; /* Important for padding logic */

            /* Padding added to compensate for Arrow Height */
            display          : flex;
            align-items      : center;
            justify-content  : center;

            /* Variables for Shape */
            --r              : 5px;
            --ap             : 50%;
            --ah             : 5px;
            --aw             : 10px;

            /* The Shape (una volta sola: usata da border-shape e dal fallback) */
            --tooltip-shape  : shape(from var(--r) 0,
            hline to calc(100% - var(--r)),
            curve to right var(--r) with right top,
            vline to calc(100% - (var(--r) + var(--ah))),
            curve to calc(100% - var(--r)) calc(100% - var(--ah)) with right calc(100% - var(--ah)),
            hline to calc(var(--ap) + var(--aw)),
            line by calc(var(--aw) * -1) var(--ah),
            line by calc(var(--aw) * -1) calc(var(--ah) * -1),
            hline to var(--r),
            curve to left calc(100% - (var(--r) + var(--ah))) with left calc(100% - var(--ah)),
            vline to var(--r),
            curve to var(--r) top with left top);

            /* Fallback: solo ritaglio (il clip taglia via anche l'ombra) */
            clip-path        : var(--tooltip-shape);

            @supports (border-shape: shape(from 0 0, line to 100% 100%)) {
                clip-path    : none;
                border-shape : var(--tooltip-shape);
                box-shadow   : 0 4px 2px #0003;
            }

            transform        : scaleY(0);
            transform-origin : center bottom;
            opacity          : 0;
            /*transition       : .2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
            pointer-events   : none;
        }

        &:hover::after {
            transform : scale(1);
            opacity   : 1;
        }
    }

    .toc {
        background      : rgba(from var(--bg) r g b / .8);
        backdrop-filter : blur(40px);
        border          : 1px solid var(--border);
        border-radius   : 6px;
        padding         : 0.85rem 1.1rem;
        margin          : 1.5rem 0 2rem;
        display         : inline-block;
        width           : 100%;
        @supports (corner-shape:bevel) {
            corner-shape  : bevel;
            border-radius : 5px 20px 20px 5px;
        }

        .toc-title {
            font-size      : 0.75rem;
            font-weight    : 600;
            text-transform : uppercase;
            letter-spacing : 0.06em;
            color          : var(--accent);
            margin-bottom  : 0.6rem !important;
            animation      : var(--animation);
        }

        ul {
            list-style : none;
            margin     : 0 !important;
            padding    : 0 !important;

            li {
                margin : 0.15rem 0 !important;

                a {
                    text-decoration : none;
                    font-size       : 0.85rem;
                    color           : var(--text);
                    line-height     : 1.4;
                    display         : block;
                    padding         : 2px 5px;

                    &.current {
                        color       : var(--accent);
                        animation   : var(--animation);
                        position    : relative;
                        font-weight : bold;

                        &::before {
                            content  : ' ▶ ';
                            position : absolute;
                            left     : -14px;
                        }
                    }

                    &:hover {
                        color           : var(--accent);
                        text-decoration : underline;
                        animation       : var(--animation);
                    }
                }
                &.separator {
                    border-top : 1px solid var(--border);
                    margin     : 10px -15px !important;
                }
            }
        }

        > ul > li > ul {
            padding-left : 0.9rem !important;
            margin       : 0.1rem 0 0.1rem 0.25rem !important;
            position     : relative;
            &:before {
                content     : '';
                border-left : 2px solid var(--accent);
                position    : absolute;
                left        : 0;
                top         : 0;
                animation   : var(--animation);
                bottom      : 0;
                opacity     : .5;
            }
        }

        abbr {
            text-decoration : underline dotted var(--accent) 1px;
        }
    }

    #clonediv {
        position   : fixed;
        top        : 100px;
        right      : 20px;
        transition : 1s all;
        width      : calc((100vw - 800px) / 2);

        &.hidden {
            transform : translateY(-100vh);
        }

        @media (max-width : 1200px) {
            display : none;
        }
    }
    .alert {
        padding       : 0.75rem 1rem;
        border-radius : 4px;
        margin-bottom : 1rem;
        font-size     : 0.9rem;

        &.alert-success {
            background : #d1fae5;
            color      : #065f46;
            border     : 1px solid #6ee7b7;
        }

        &.alert-error {
            background : #fee2e2;
            color      : #991b1b;
            border     : 1px solid #fca5a5;
        }

        &.alert-info {
            background : #eff6ff;
            color      : #1e40af;
            border     : 1px solid #bfdbfe;
        }
    }

    dl {
        margin      : 2rem 0;
        border-top  : 3px double rgba(from var(--accent) r g b /.3);
        padding-top : 1rem;
        animation   : var(--animation);

        dt {
            font-family : var(--font-monospace);
            font-size   : 0.9rem;
            font-weight : bold;
            margin-top  : 1rem;
            color       : var(--text);
        }

        dd {
            margin : 0.25rem 0 0.5rem 1.25rem;
            color  : var(--text);
        }
    }

    dl + pre,
    dl + dl {
        margin-top : 0;
    }

}

@keyframes colorH {
    0% {
        filter : hue-rotate(0);
    }
    100% {
        filter : hue-rotate(360deg);
    }
}

body::-webkit-scrollbar {
    width : 14px;
}

body::-webkit-scrollbar-track {
    background    : var(--accent-body);
    border-radius : 3px;
    corner-shape  : bevel;
    animation     : var(--animation);
}

body::-webkit-scrollbar-thumb {
    background    : var(--accent);
    border-radius : 3px;
    corner-shape  : bevel;
    animation     : var(--animation);
}