@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap";

:root {
    --font-sans: "Space Grotesk", "Space Mono", "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Space Mono", SFMono-Regular, Consolas, monospace;
    --color-surface: #03030b;
    --color-surface-soft: rgba(12, 20, 36, .75);
    --color-surface-glass: rgba(10, 16, 32, .65);
    --color-text-primary: #f7fbff;
    --color-text-secondary: #a1b7ff;
    --color-text-muted: #8fa0c1;
    --color-accent: #50c7ff;
    --color-accent-soft: rgba(80, 199, 255, .4);
    --color-highlight: #ffb743;
    --border-radius-xl: 32px
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0
}

body {
    min-height: 100vh;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

button,
input,
textarea {
    font: inherit
}

#app {
    width: 100%
}

main {
    width: 100%
}

a {
    color: var(--color-accent);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.celestial-wrapper[data-v-af3d692d] {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: var(--color-text-secondary);
    min-width: 48px;
    outline: none
}

.celestial-wrapper[data-v-af3d692d]:disabled {
    cursor: default
}

.label[data-v-af3d692d] {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .1em
}

.celestial[data-v-af3d692d] {
    position: relative;
    width: clamp(22px, 4vw, 46px);
    height: clamp(22px, 4vw, 46px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .25s ease, filter .25s ease
}

.celestial-wrapper:not(:disabled):hover .celestial[data-v-af3d692d] {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5))
}

.pulse-ring[data-v-af3d692d] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    animation: radar-af3d692d 3s ease-in-out infinite
}

.core[data-v-af3d692d] {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: #ffffffd9
}

.is-past[data-v-af3d692d] {
    box-shadow: inset 0 0 20px #73fff3cc, 0 0 20px #48b5ff80
}

.is-current[data-v-af3d692d] {
    box-shadow: inset 0 0 20px #ffb743e6, 0 0 25px #ff9932b3
}

.is-future[data-v-af3d692d] {
    opacity: .35;
    filter: grayscale(.4)
}

.type-star[data-v-af3d692d] {
    background: linear-gradient(145deg, #fff36dd9, #ffa24cd9)
}

.type-planet[data-v-af3d692d] {
    background: linear-gradient(145deg, #5dbcffe6, #6f5cffcc)
}

.type-nebula[data-v-af3d692d] {
    background: linear-gradient(145deg, #bc63ffb3, #3eb6ffb3)
}

.type-asteroid[data-v-af3d692d] {
    background: linear-gradient(145deg, #94a5b8cc, #5a687acc)
}

.is-current .pulse-ring[data-v-af3d692d] {
    border-color: #ffb74399;
    animation-duration: 2.4s
}

.is-past .pulse-ring[data-v-af3d692d] {
    border-color: #50c7ff80
}

.is-future .pulse-ring[data-v-af3d692d] {
    display: none
}

@keyframes radar-af3d692d {
    0% {
        transform: scale(.7);
        opacity: .7
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

.star-map[data-v-f2c99af0] {
    position: relative;
    min-height: min(80vh, 720px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 32px;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: #01040e99;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: hidden
}

.starmap__origin[data-v-f2c99af0] {
    position: absolute;
    left: 8%;
    top: 82%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: .75rem;
    font-family: var(--font-mono)
}

.origin-core[data-v-f2c99af0] {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffb643, #f0712d);
    box-shadow: 0 0 15px #ffb643cc;
    margin: 0 auto;
    transform: translate3d(0, 50px, 0)
}

.origin-flare[data-v-f2c99af0] {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: .5rem auto;
    background: radial-gradient(circle, rgba(255, 182, 67, .4), transparent 70%);
    animation: pulse-f2c99af0 4s ease-in-out infinite
}

.starmap__nav[data-v-f2c99af0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.starmap__nav polyline[data-v-f2c99af0] {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: .6;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 2 4;
    filter: drop-shadow(0 0 6px rgba(80, 199, 255, .65));
    animation: dash-f2c99af0 9s linear infinite
}

@keyframes pulse-f2c99af0 {

    0%,
    to {
        transform: scale(.9);
        opacity: .4
    }

    50% {
        transform: scale(1.1);
        opacity: .8
    }
}

@keyframes dash-f2c99af0 {
    to {
        stroke-dashoffset: -30
    }
}

.modal[data-v-a951fd3b] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center
}

.modal__scrim[data-v-a951fd3b] {
    position: absolute;
    inset: 0;
    background: #02070ebf;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.modal__panel[data-v-a951fd3b] {
    position: relative;
    width: min(640px, 92vw);
    background: #051418f2;
    border: 1px solid rgba(80, 199, 255, .3);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: #d8fff4;
    font-family: var(--font-mono);
    line-height: 1.6;
    overflow: hidden;
    box-shadow: 0 20px 60px #00000080
}

.modal__panel[data-v-a951fd3b]:before,
.modal__panel[data-v-a951fd3b]:after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(80, 199, 255, .2);
    pointer-events: none
}

.modal__panel[data-v-a951fd3b]:after {
    animation: glitch-a951fd3b 8s steps(2) infinite;
    opacity: .3
}

.panel-eyebrow[data-v-a951fd3b] {
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: .75rem;
    color: #e1fff5b3
}

.modal__panel h2[data-v-a951fd3b] {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    color: var(--color-highlight);
    margin-bottom: .5rem
}

.panel-meta[data-v-a951fd3b] {
    color: #fff9;
    margin-bottom: 1.5rem
}

.panel-body[data-v-a951fd3b] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.panel-figure[data-v-a951fd3b] {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(80, 199, 255, .2);
    background: #0000004d
}

.panel-figure img[data-v-a951fd3b] {
    width: 100%;
    display: block
}

.panel-figure figcaption[data-v-a951fd3b] {
    padding: .75rem 1rem;
    font-size: .9rem;
    color: #fffc;
    border-top: 1px solid rgba(80, 199, 255, .15)
}

.panel-reward[data-v-a951fd3b] {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid rgba(255, 183, 67, .4);
    border-radius: 16px;
    background: #ff9d4f0d
}

.reward-label[data-v-a951fd3b] {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .7rem;
    color: #ffffffb3;
    margin-bottom: .3rem
}

.reward-content[data-v-a951fd3b] {
    font-size: 1rem;
    color: var(--color-highlight)
}

.ghost-btn[data-v-a951fd3b] {
    margin-top: 1rem;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(80, 199, 255, .6);
    color: var(--color-text-primary);
    padding: .85rem 1.5rem;
    border-radius: 12px;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s ease
}

.ghost-btn[data-v-a951fd3b]:hover {
    background: #50c7ff1f
}

.modal-enter-active[data-v-a951fd3b],
.modal-leave-active[data-v-a951fd3b] {
    transition: opacity .2s ease
}

.modal-enter-from[data-v-a951fd3b],
.modal-leave-to[data-v-a951fd3b] {
    opacity: 0
}

@keyframes glitch-a951fd3b {
    0% {
        clip-path: inset(0 0 80% 0)
    }

    10% {
        clip-path: inset(10% 0 60% 0)
    }

    20% {
        clip-path: inset(30% 0 30% 0)
    }

    30% {
        clip-path: inset(60% 0 10% 0)
    }

    40% {
        clip-path: inset(80% 0 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

.app-layout[data-v-93c8fb4c] {
    min-height: 100vh;
    padding: 2rem clamp(1.5rem, 5vw, 4rem) 3rem;
    color: var(--color-text-primary);
    position: relative;
    overflow: hidden
}

.cosmic-backdrop[data-v-93c8fb4c] {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(137, 96, 255, .25), transparent 60%), radial-gradient(circle at 80% 20%, rgba(61, 199, 255, .2), transparent 55%), #03030b;
    z-index: -3
}

.parallax-layer[data-v-93c8fb4c] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 200px 150px, rgba(255, 255, 255, .5), transparent), radial-gradient(1.5px 1.5px at 400px 250px, rgba(255, 255, 255, .35), transparent);
    animation: drift-93c8fb4c 45s linear infinite;
    opacity: .6
}

.layer-near[data-v-93c8fb4c] {
    transform: scale(1.3);
    animation-duration: 60s
}

.layer-far[data-v-93c8fb4c] {
    animation-duration: 90s;
    opacity: .3
}

.nebula[data-v-93c8fb4c] {
    position: absolute;
    width: 40vw;
    height: 40vw;
    filter: blur(100px);
    opacity: .15;
    background: radial-gradient(circle, rgba(102, 252, 241, .6), transparent 70%);
    animation: pulse-93c8fb4c 18s ease-in-out infinite
}

.haze-one[data-v-93c8fb4c] {
    top: 10%;
    left: -5%
}

.haze-two[data-v-93c8fb4c] {
    bottom: -10%;
    right: -5%;
    animation-delay: 4s
}

.hero[data-v-93c8fb4c] {
    max-width: 780px;
    text-align: left;
    margin: 0 auto 2rem
}

.eyebrow[data-v-93c8fb4c] {
    font-family: var(--font-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-size: .85rem;
    margin-bottom: .75rem
}

.hero h1[data-v-93c8fb4c] {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: .8rem
}

.lede[data-v-93c8fb4c] {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 620px
}

main[data-v-93c8fb4c] {
    position: relative;
    z-index: 1
}

.status-bar[data-v-93c8fb4c] {
    margin-top: 2rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: .95rem
}

.dot[data-v-93c8fb4c] {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    margin-right: .35rem
}

.dot-past[data-v-93c8fb4c] {
    background: var(--color-accent);
    box-shadow: 0 0 6px var(--color-accent-soft)
}

.dot-current[data-v-93c8fb4c] {
    background: var(--color-highlight);
    box-shadow: 0 0 6px #ffb74399
}

.dot-future[data-v-93c8fb4c] {
    background: #fff3
}

@keyframes drift-93c8fb4c {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-200px, -120px, 0)
    }
}

@keyframes pulse-93c8fb4c {

    0%,
    to {
        opacity: .08;
        transform: scale(1)
    }

    50% {
        opacity: .2;
        transform: scale(1.2)
    }
}

.hidden {
    display: none !important;
}