.dev-stage-navigator {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;

    z-index: 10000;

    width: min(
        20rem,
        calc(100vw - 1.5rem)
    );

    font: inherit;

    color: #f7f1dd;

    pointer-events: none;
}

.dev-stage-navigator__toggle,
.dev-stage-navigator__panel {
    pointer-events: auto;
}

.dev-stage-navigator__toggle {
    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    min-width: 8.8rem;

    padding: 0.7rem 1rem;

    border: 1px solid
        rgba(235, 181, 45, 0.9);
    border-radius: 0.7rem;

    background:
        linear-gradient(
            180deg,
            rgba(18, 18, 24, 0.98),
            rgba(7, 9, 15, 0.98)
        );

    color: #fff;

    box-shadow:
        0 0 0 1px
            rgba(255, 210, 100, 0.12),
        0 0.6rem 2rem
            rgba(0, 0, 0, 0.38);

    font: inherit;
    cursor: pointer;
}

.dev-stage-navigator__toggle strong {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.dev-stage-navigator__panel {
    margin-top: 0.35rem;

    max-height:
        min(
            78vh,
            44rem
        );

    overflow-y: auto;
    overscroll-behavior: contain;

    border: 1px solid
        rgba(235, 181, 45, 0.9);
    border-radius: 0.7rem;

    background:
        linear-gradient(
            180deg,
            rgba(10, 12, 18, 0.985),
            rgba(8, 8, 13, 0.985)
        );

    box-shadow:
        0 1rem 3rem
            rgba(0, 0, 0, 0.5);

    scrollbar-width: thin;
}

.dev-stage-navigator__panel[hidden] {
    display: none;
}

.dev-stage-navigator__group {
    padding:
        0.8rem
        0.75rem
        0.5rem;
}

.dev-stage-navigator__group
    + .dev-stage-navigator__group {
    border-top: 1px solid
        rgba(255, 255, 255, 0.08);
}

.dev-stage-navigator__group h3 {
    margin:
        0
        0
        0.45rem;

    font-size: 0.78rem;
    line-height: 1.3;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.dev-stage-navigator__group[
    data-tone="blue"
] h3 {
    color: #70b8ff;
}

.dev-stage-navigator__group[
    data-tone="violet"
] h3 {
    color: #b678ff;
}

.dev-stage-navigator__group[
    data-tone="red"
] h3 {
    color: #ff746f;
}

.dev-stage-navigator__checkpoint {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 0.55rem;

    padding:
        0.5rem
        0.55rem;

    border: 1px solid transparent;
    border-radius: 0.38rem;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    text-align: left;

    font: inherit;
    font-size: 0.84rem;

    cursor: pointer;
}

.dev-stage-navigator__checkpoint:hover,
.dev-stage-navigator__checkpoint:focus-visible {
    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    outline: none;
}

.dev-stage-navigator__checkpoint.is-active {
    border-color:
        rgba(
            171,
            92,
            255,
            0.95
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                83,
                31,
                125,
                0.82
            ),
            rgba(
                44,
                22,
                75,
                0.7
            )
        );

    box-shadow:
        inset 0 0 0 1px
            rgba(
                211,
                155,
                255,
                0.1
            );
}

.dev-stage-navigator__marker {
    flex:
        0
        0
        0.85rem;

    width: 0.85rem;
    height: 0.85rem;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.64
        );

    border-radius: 999px;
}

.dev-stage-navigator__checkpoint.is-active
.dev-stage-navigator__marker {
    border-color: #c785ff;

    box-shadow:
        inset 0 0 0 0.22rem
            rgba(
                199,
                133,
                255,
                0.95
            );
}

.dev-stage-navigator__reset {
    width: 100%;

    padding:
        0.8rem
        1rem;

    border: 0;
    border-top: 1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                109,
                20,
                19,
                0.92
            ),
            rgba(
                77,
                15,
                17,
                0.96
            )
        );

    color: #ffe8e6;

    font: inherit;
    font-size: 0.8rem;

    cursor: pointer;
}

.dev-stage-navigator__reset:hover,
.dev-stage-navigator__reset:focus-visible {
    background:
        rgba(
            145,
            27,
            25,
            0.96
        );

    outline: none;
}

@media (
    max-width: 720px
) {
    .dev-stage-navigator {
        top: 0.5rem;
        right: 0.5rem;

        width:
            min(
                19rem,
                calc(
                    100vw
                    - 1rem
                )
            );
    }

    .dev-stage-navigator__panel {
        max-height: 68vh;
    }
}