@layer stack {
    .browser-content .stack-scene {
        width: 100%;
    }

    .browser-content .stack {
        display: flex;
        flex-direction: column;
        gap: 2px;
        transform: perspective(1200px) rotateX(4deg) rotateY(-2deg);
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .browser-content .stack:hover {
        transform: perspective(1200px) rotateX(6deg) rotateY(-3deg);
    }

    .browser-content .layer {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 1em;
        padding: 0.7em 1.2em;
        background: oklch(0.2 0.015 260 / 0.6);
        border: 1px solid oklch(1 0 0 / 0.06);
        position: relative;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: var(--mono);
    }

    .browser-content .layer::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
    }

    .browser-content .layer:hover {
        background: oklch(0.22 0.015 260 / 0.8);
    }

    .browser-content .layer-tag {
        font-size: 0.55rem;
        font-weight: 400;
        opacity: 0.3;
        letter-spacing: 0.1em;
        min-width: 2.5em;
    }

    .browser-content .layer-text {
        font-size: clamp(1.5rem, 5vw, 3rem);
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .browser-content .layer-label {
        font-size: 0.5rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        opacity: 0.4;
        text-align: right;
    }

    .browser-content .layer-html {
        color: var(--html);
    }
    .browser-content .layer-html::before { background: var(--html); }
    .browser-content .layer-html:hover { box-shadow: 0 0 30px var(--html-dim); }

    .browser-content .layer-http {
        color: var(--http);
    }
    .browser-content .layer-http::before { background: var(--http); }
    .browser-content .layer-http:hover { box-shadow: 0 0 30px var(--http-dim); }

    .browser-content .layer-server {
        color: var(--server);
    }
    .browser-content .layer-server::before { background: var(--server); }
    .browser-content .layer-server:hover { box-shadow: 0 0 30px var(--server-dim); }

    .browser-content .pipe {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3em 0;
        position: relative;
    }

    .browser-content .pipe::before {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        left: 50%;
        background: oklch(1 0 0 / 0.08);
    }

    .browser-content .pipe-label {
        font-size: 0.5rem;
        letter-spacing: 0.15em;
        opacity: 0.2;
        background: oklch(0.15 0.02 260);
        padding: 0.2em 0.8em;
        position: relative;
        z-index: 1;
        font-family: var(--mono);
    }

    .browser-content .annotation {
        text-align: center;
        margin-top: 1.2rem;
        font-size: 0.55rem;
        letter-spacing: 0.15em;
        opacity: 0.2;
        text-wrap: balance;
        color: oklch(1 0 0 / 0.6);
        font-family: var(--mono);
    }

    /* Hover spread */
    .browser-content .stack:hover .layer-html   { transform: translateY(-6px); }
    .browser-content .stack:hover .layer-server { transform: translateY(6px); }
}