.code-window {
    position:relative;

    overflow:hidden;
    isolation:isolate;

    border:.5px solid rgba(255,255,255,.085);
    border-radius:1.35rem;

    background:#0d0d0f;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 1.4rem 4rem rgba(0,0,0,.28);

    transform:translateZ(0);
}


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

    position:absolute;
    inset:0;

    z-index:3;

    border-radius:inherit;

    box-shadow:
        inset 0 0 0 .5px rgba(255,255,255,.025);

    pointer-events:none;
}


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

    height:3.2rem;

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

    padding:0 1.05rem;

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

    background:#101012;
}


.code-dots {
    justify-self:start;

    display:flex;
    align-items:center;

    gap:.42rem;
}


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

    display:block;

    border-radius:50%;

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


.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 {
    grid-column:2;

    justify-self:center;

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

    font-family:var(--font-mono);
    font-size:.62rem;
    line-height:1;

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

    white-space:nowrap;
}


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

    width:100%;

    margin:0;

    padding:
        clamp(2.9rem,4.4vw,4rem)
        clamp(2.6rem,5vw,4.5rem);

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

    color:#d4d4d4;
    background:transparent;

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

    font-size:
        clamp(
            .98rem,
            1.22vw,
            1.14rem
        );

    line-height:1.72;
    font-weight:400;
    letter-spacing:-.012em;

    tab-size:4;
    white-space:pre;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(255,255,255,.12)
        transparent;

    overscroll-behavior-x:contain;
}


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

    font:inherit;

    color:inherit;
    background:transparent;

    white-space:pre;
}


.code-block::-webkit-scrollbar {
    height:5px;
}


.code-block::-webkit-scrollbar-track {
    background:transparent;
}


.code-block::-webkit-scrollbar-thumb {
    border-radius:10rem;

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


.code-block::-webkit-scrollbar-thumb:hover {
    background:rgba(255,255,255,.19);
}


.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;
}


[data-code-window] .code-block:focus {
    outline:none;
}


[data-code-window]:focus-within {
    border-color:rgba(10,132,255,.42);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 0 0 3px rgba(10,132,255,.08),
        0 1.4rem 4rem rgba(0,0,0,.28);
}


@media (max-width:1050px) {
    .code-block {
        padding:
            2.8rem
            2.6rem;

        font-size:.96rem;
    }
}


@media (prefers-contrast:more) {
    .code-window {
        border-color:rgba(255,255,255,.32);

        box-shadow:none;
    }

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

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


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


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