.code-window {
    position:relative;
    overflow:hidden;

    border-radius:var(--r-large);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            transparent 6rem
        ),
        #0d0d0f;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 0 .5px rgba(255,255,255,.055),
        0 1px 2px rgba(0,0,0,.18),
        0 1.4rem 4rem rgba(0,0,0,.38);

    transform:translateZ(0);
    isolation:isolate;
}


.code-window::after {
    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.018);

    pointer-events:none;
}


.code-window-top {
    position:relative;
    z-index:2;

    min-height:3.1rem;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    padding:0 .9rem;

    border-bottom:.5px solid rgba(255,255,255,.06);

    background:rgba(255,255,255,.012);
}


.code-dots {
    display:flex;
    align-items:center;
    justify-self:start;

    gap:.36rem;
}


.code-dots span {
    width:.48rem;
    height:.48rem;

    display:block;

    border-radius:50%;

    box-shadow:
        inset 0 0 0 .5px rgba(0,0,0,.17);
}


.code-dots span:nth-child(1) {
    background:#ff5f57;
}


.code-dots span:nth-child(2) {
    background:#febc2e;
}


.code-dots span:nth-child(3) {
    background:#28c840;
}


.code-file,
.code-status {
    font-family:var(--font-mono);

    font-size:.56rem;
    line-height:1;

    font-weight:500;
    letter-spacing:.005em;

    white-space:nowrap;
}


.code-file {
    justify-self:center;

    color:rgba(235,235,245,.31);
}


.code-status {
    justify-self:end;

    color:rgba(100,210,255,.56);
}


.code-block {
    position:relative;
    z-index:1;

    margin:0;

    padding:
        1.7rem
        1.2rem
        1.9rem;

    overflow-x:auto;
    overflow-y:hidden;

    color:#d4d4d4;
    background:transparent;

    font-family:var(--font-mono);

    font-size:
        clamp(
            .7rem,
            3.1vw,
            .84rem
        );

    line-height:1.7;

    font-weight:400;
    letter-spacing:-.015em;

    tab-size:4;

    scrollbar-width:none;

    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
}


.code-block::-webkit-scrollbar {
    display:none;
}


.code-block code {
    margin:0;
    padding:0;

    font:inherit;

    color:inherit;
    background:none;

    white-space:pre;
}


.code-tag {
    color:#569cd6;
}


.code-attr {
    color:#9cdcfe;
}


.code-string {
    color:#ce9178;
}


.code-object {
    color:#4ec9b0;
}


.code-method {
    color:#dcdcaa;
}


.code-key {
    color:#9cdcfe;
}


.code-number {
    color:#b5cea8;
}


.code-comment {
    color:#6a9955;
}


.code-keyword {
    color:#c586c0;
}


.code-function {
    color:#dcdcaa;
}


.code-variable {
    color:#9cdcfe;
}


.code-boolean,
.code-null {
    color:#569cd6;
}


.code-punctuation {
    color:#d4d4d4;
}


.code-window-small .code-window-top {
    min-height:3rem;
}


.code-window-small .code-block {
    padding:
        1.55rem
        1rem
        1.7rem;

    font-size:
        clamp(
            .68rem,
            3vw,
            .8rem
        );
}


[data-code-window]:focus-within {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 0 .5px rgba(10,132,255,.38),
        0 1px 2px rgba(0,0,0,.18),
        0 1.4rem 4rem rgba(0,0,0,.38);
}


@media (max-width:390px) {
    .code-window-top {
        padding-left:.8rem;
        padding-right:.8rem;
    }

    .code-block {
        padding:
            1.55rem
            1rem
            1.75rem;

        font-size:
            clamp(
                .66rem,
                3vw,
                .78rem
            );
    }

    .code-status {
        font-size:.53rem;
    }
}


@media (max-width:350px) {
    .code-file {
        justify-self:start;

        margin-left:.55rem;
    }

    .code-status {
        display:none;
    }

    .code-window-top {
        grid-template-columns:auto 1fr;
    }
}


@media (prefers-contrast:more) {
    .code-window {
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.34),
            0 1.4rem 4rem rgba(0,0,0,.4);
    }

    .code-window-top {
        border-bottom-color:rgba(255,255,255,.26);
    }

    .code-file {
        color:rgba(245,245,247,.72);
    }

    .code-status {
        color:#64d2ff;
    }
}


@media (prefers-reduced-transparency:reduce) {
    .code-window {
        background:#0d0d0f;
    }

    .code-window-top {
        background:#111114;
    }
}


@media (prefers-reduced-motion:reduce) {
    .code-window,
    .code-window * {
        scroll-behavior:auto !important;
    }
}