:root {
    color-scheme: dark;
}

* { letter-spacing: 0 !important; }
input[type=range]:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }
.aieyra-product-story { overscroll-behavior: contain; }

.planet-node {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.planet-node:focus-visible .planet-body,
.planet-node:hover .planet-body {
    background: var(--text-white);
    border-color: var(--text-white);
    box-shadow: 0 0 30px var(--planet-color);
    transform: scale(1.1);
}

.planet-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    z-index: 30;
    padding: 0 0 7px;
    color: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--planet-color, rgba(255, 255, 255, 0.72));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    font-family: 'Jura', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 2px 14px #05090f;
    white-space: nowrap;
    transform: translate(-50%, 6px);
    transition: opacity 180ms ease-out, transform 220ms ease-out, visibility 180ms step-end;
}

.planet-node:focus-visible .planet-tooltip,
.planet-node:hover .planet-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 180ms ease-out, transform 220ms ease-out, visibility 0s linear;
}

.planet-node:focus-visible::after {
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    content: '';
}

.aieyra-product-view::after {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 62%;
    content: '';
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 9, 15, 0.58) 38%, rgba(5, 9, 15, 0.96) 100%);
}

.aieyra-product-story {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 40px;
    z-index: 60;
    width: min(610px, calc(100vw - 200px));
    max-height: calc(100svh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-left: 18px;
    border-left: 1px solid rgba(232, 224, 198, 0.5);
    pointer-events: auto;
    text-shadow: 0 2px 20px #000;
    transform: translateY(-50%);
}

.aieyra-product-view::before {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2;
    width: min(72vw, 940px);
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 9, 15, 0.72), rgba(5, 9, 15, 0.24) 68%, transparent);
}

.aieyra-product-story h2 {
    margin: 0;
    max-width: 15em;
    color: #fff;
    font-family: 'Jura', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
}

.product-copy {
    max-width: 48em;
    margin-top: 16px;
    color: rgba(238, 241, 246, 0.76);
    font-family: 'Jura', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.85;
}

.product-copy p {
    margin: 0;
}

.product-copy p + p {
    margin-top: 8px;
}

.aieyra-product-story h2,
.product-copy p {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .nav-stage {
        pointer-events: auto;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 100px 20px;
        scrollbar-color: rgba(224, 98, 54, 0.5) transparent;
        scrollbar-width: thin;
    }

    .axis-group {
        min-width: max-content;
        margin: 0;
    }

    .zoom-controls {
        display: none;
    }

    .aieyra-product-story {
        width: min(570px, calc(100vw - 170px));
    }

    .aieyra-product-story h2 {
        font-size: 29px;
    }
}

@media (max-width: 640px) {
    :root {
        --segmented-colorbar-stripe-width: 6px;
        --segmented-colorbar-outer-gap: 12px;
    }

    .nav-stage {
        padding-right: 92px;
        padding-left: 92px;
    }

    .axis-group {
        height: 250px;
        margin: 0;
    }

    .vertical-controls {
        display: none;
    }

    .aieyra-product-view::after {
        height: 66%;
        background: linear-gradient(180deg, transparent 0%, rgba(5, 9, 15, 0.72) 30%, #05090f 68%);
    }

    .aieyra-product-story {
        right: 20px;
        top: 50%;
        bottom: auto;
        left: 20px;
        width: auto;
        max-height: calc(100svh - 180px);
        padding: 0 0 0 14px;
        overflow-y: auto;
        scrollbar-width: thin;
        transform: translateY(-50%);
    }

    .aieyra-product-story h2 {
        margin-top: 9px;
        font-size: 24px;
        line-height: 1.2;
    }

    .product-copy {
        margin-top: 11px;
        font-size: 12px;
        line-height: 1.7;
    }

    .aieyra-product-story h2,
    .product-copy p {
        white-space: normal;
    }

    .product-copy p + p {
        margin-top: 6px;
    }

}

@media (max-width: 360px) {
    .aieyra-product-story {
        right: 15px;
        left: 15px;
        max-height: 56vh;
    }

    .aieyra-product-story h2 {
        font-size: 21px;
    }

    .product-copy {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planet-node,
    .planet-body,
    .planet-tooltip {
        transition-duration: 1ms;
    }
}