/* GENERATED by tools/build.sh from src/login.src.css + build/stars.css.inc: do not edit, edit the source and rebuild. */
/*
 * Moonline portal — Season 02 login screen.
 * Standalone stylesheet: the signed-out title screen does not load style.css.
 * Tokens mirror the signed-in theme (glass.css): black, neon cyan / hot pink / lime.
 * Art is generated SVG (assets/login/*.svg); nothing here depends on raster images.
 *
 * Conventions used below:
 *  - Entrance animations use fill-mode "backwards": every "to" keyframe equals the element's
 *    natural style, so finished animations release their compositor layers.
 *  - Ambient (infinite) loops are listed once in "Ambient motion" so the visibility pause
 *    and the on-page "Pause motion" control affect exactly the same set.
 */

@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/chakra-petch-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/chakra-petch-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: dark;
    --vh: 1vh;
    --bg: #030306;
    --text: #f5f4ff;
    --muted: #b7b6c9;
    --cyan: #00f0ff;
    --pink: #ff38b8;
    --lime: #dfff63;
    --ui: "Chakra Petch", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* wordmark.svg viewBox width / height; tools/build.sh fails if this drifts */
    --title-ar: 4.4079;
    --horizon: calc(var(--vh) * 52);
    --sky-h: clamp(130px, calc(var(--vh) * 24), 300px);
    /* The season label sits at --season-top; the moon must clear it (moon top = horizon - 0.82 * moon). */
    --season-top: max(30px, calc(env(safe-area-inset-top) + 8px));
    --season-band: calc(var(--season-top) + 34px);
    --moon: min(calc(var(--vh) * 52), 84vw, calc((var(--horizon) - var(--season-band)) / 0.82));
    --title-w: min(780px, 80vw, calc(var(--vh) * 100));
    --title-h: calc(var(--title-w) / var(--title-ar));
    /* shore.svg is 3200x180 with the waterline at y=74 (0.4111 of its height) */
    --shore-h: clamp(96px, calc(var(--vh) * 16), 190px);
}

@supports (height: 100svh) {
    :root {
        --vh: 1svh;
    }
}

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

html {
    background: var(--bg);
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 500 16px/1.5 var(--ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ scene */

.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg);
    contain: paint;
    pointer-events: none;
}

.scene > * {
    position: absolute;
}

.sky {
    inset: 0;
    background:
        radial-gradient(130% 62% at 50% var(--horizon), rgba(255, 56, 184, 0.4), transparent 64%),
        linear-gradient(180deg, #02020a 0%, #060316 28%, #110832 50%, #2b0d50 var(--horizon), #050208 var(--horizon));
    animation: fade-in 0.7s ease backwards;
}

.stars {
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent var(--horizon));
    mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent var(--horizon));
    animation: fade-in 1.4s ease 0.1s backwards;
}

.stars i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background: transparent;
}

.stars .stars-b {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle 5.2s ease-in-out infinite alternate;
}

.stars .stars-c {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle 3.4s ease-in-out -1.7s infinite alternate;
}

.shooting-star {
    top: 11%;
    left: 74%;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
    box-shadow: 0 0 10px rgba(180, 240, 255, 0.9);
    opacity: 0;
    animation: shoot 19s linear 7s infinite;
}

/* moon: 82% of it sits above the horizon; the rest is clipped so it can never show through the floor */
.moon-wrap {
    left: 50%;
    top: calc(var(--horizon) - var(--moon) * 0.82);
    width: var(--moon);
    height: var(--moon);
    margin-left: calc(var(--moon) / -2);
    /* bottom inset = 1 - 0.82 (the moon-wrap top factor above); negative insets keep bloom + glow uncropped */
    clip-path: inset(-60% -60% 18% -60%);
    will-change: transform;
}

.bf {
    position: absolute;
    inset: 0;
    animation: fade-in 1.4s ease backwards;
}

.moon {
    position: absolute;
    inset: 0;
    animation: moon-rise 1.5s var(--ease-out) 0.05s backwards;
}

.moon-svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 26px rgba(255, 90, 214, 0.5));
}

.moon-bloom {
    position: absolute;
    inset: -40%;
    background: radial-gradient(closest-side, rgba(255, 72, 210, 0.4), rgba(120, 70, 255, 0.2) 46%, rgba(0, 240, 255, 0.06) 64%, transparent 74%);
    animation: bloom 7s ease-in-out infinite alternate;
}

/* skyline parallax layers: .layer is moved by JS, .skyline plays the entrance */
.layer {
    left: -4%;
    right: -4%;
    height: var(--sky-h);
    bottom: calc(100% - var(--horizon));
    will-change: transform;
}

.layer-mid {
    bottom: calc(100% - var(--horizon) - 6px);
}

.layer-near {
    bottom: calc(100% - var(--horizon) - 20px);
    height: calc(var(--sky-h) * 0.8);
}

/* the bright lights: a dense band along the waterline plus its rippled reflection (see tools/build_art.py shore()) */
.layer-shore {
    bottom: auto;
    top: calc(var(--horizon) - var(--shore-h) * 0.4111);
    height: var(--shore-h);
}

.shore {
    position: absolute;
    inset: 0;
    background: url("login/shore.svg?v=c30d8206") 50% 0 / auto 100% no-repeat;
    animation: shore-on 1.3s ease 0.55s backwards;
}

/* slow glints drifting across the reflection */
.glints {
    left: 0;
    right: 0;
    top: calc(var(--horizon) + 3px);
    height: calc(var(--shore-h) * 0.55);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, transparent 100%);
    animation: fade-in 1.4s ease 1s backwards;
}

/* only the fallback floor has glints: with WebGL the ripples do this job */
.glints {
    display: none;
}

.no-water .glints {
    display: block;
}

.glints::before,
.glints::after {
    content: "";
    position: absolute;
    inset: 0 -8%;
    background-repeat: no-repeat;
}

.glints::before {
    background-image:
        linear-gradient(90deg, transparent, rgba(255, 208, 246, 0.6), transparent),
        linear-gradient(90deg, transparent, rgba(190, 210, 255, 0.5), transparent),
        linear-gradient(90deg, transparent, rgba(255, 208, 246, 0.45), transparent),
        linear-gradient(90deg, transparent, rgba(255, 160, 230, 0.5), transparent);
    background-size: 170px 2px, 96px 1px, 250px 1px, 130px 2px;
    background-position: 30% 14%, 45% 40%, 56% 26%, 66% 62%;
    animation: glint-a 28s ease-in-out infinite alternate;
}

.glints::after {
    background-image:
        linear-gradient(90deg, transparent, rgba(255, 190, 240, 0.5), transparent),
        linear-gradient(90deg, transparent, rgba(200, 220, 255, 0.45), transparent),
        linear-gradient(90deg, transparent, rgba(255, 208, 246, 0.5), transparent);
    background-size: 140px 1px, 210px 2px, 90px 1px;
    background-position: 38% 22%, 52% 50%, 61% 74%;
    animation: glint-b 34s ease-in-out infinite alternate;
}

.skyline {
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-position: 50% 100%;
    background-size: auto 100%;
    animation: skyline-rise 1.1s var(--ease-out) backwards;
}

/* build.sh appends ?v=<content hash> to these URLs: nginx caches svg as immutable for a year */
.skyline-far {
    background-image: url("login/skyline-far.svg?v=666d7fbf");
    animation-delay: 0.12s;
}

.skyline-mid {
    background-image: url("login/skyline-mid.svg?v=c5aeb656");
    animation-delay: 0.22s;
}

.skyline-near {
    background-image: url("login/skyline-near.svg?v=fb4bed35");
    animation-delay: 0.34s;
}

.haze {
    left: 0;
    right: 0;
    bottom: calc(100% - var(--horizon));
    height: 34%;
    background: radial-gradient(70% 100% at 50% 100%, rgba(255, 72, 210, 0.5), rgba(130, 70, 255, 0.22) 48%, transparent 76%);
    animation: fade-in 1.4s ease 0.2s backwards;
}

/*
 * Water. .floor is the always-there floor (CSS only: dark glossy water with a pink glow under the city, a soft moon path
 * with its stripes, and faint static streaks). When WebGL works, assets/water.js paints a canvas into .water, which sits
 * ABOVE the near skyline so the buildings stand on the waterline: the canvas reflects the moon, the three skylines and the
 * shore lights, distorted by ripples that travel toward the camera. Without WebGL (or JS) only .floor shows, plus the
 * baked reflection art and the drifting glints below. html.has-water / html.no-water are set by water.js.
 */
.floor {
    left: 0;
    right: 0;
    top: var(--horizon);
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #2a0a48 0%, #170541 9%, #0d0332 34%, #070227 100%);
    box-shadow: 0 -8px 24px rgba(255, 72, 210, 0.3);
    animation: fade-in 1s ease 0.3s backwards;
}

/* a still hint of ripple streaks, dense at the waterline and gone by mid-floor */
.floor::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(255, 190, 240, 0.07) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(180deg, rgba(140, 150, 255, 0.06) 0 1px, transparent 1px 8px);
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 58%);
    mask-image: linear-gradient(180deg, #000 0, transparent 58%);
}

/* the moon's path, without ripples: a soft column with the moon's stripes as dark bands that thin out with distance.
   It sits under the WebGL canvas (which covers it once it fades in) and is the moon reflection of the fallback floor. */
.floor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(calc(var(--moon) * 0.72), 74vw);
    height: min(88%, calc(var(--moon) * 0.7));
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(12, 3, 48, 0.55), rgba(12, 3, 48, 0.55)) 0 16% / 100% 9px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.5), rgba(12, 3, 48, 0.5)) 0 27% / 100% 7px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.45), rgba(12, 3, 48, 0.45)) 0 37% / 100% 5px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.4), rgba(12, 3, 48, 0.4)) 0 45% / 100% 4px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.35), rgba(12, 3, 48, 0.35)) 0 52% / 100% 3px no-repeat,
        linear-gradient(180deg, rgba(255, 96, 216, 0.4), rgba(170, 96, 255, 0.24) 30%, rgba(96, 140, 255, 0.11) 58%, transparent 90%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
}

.floor-fade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(30% 62% at 50% 0, rgba(255, 96, 216, 0.4), transparent 72%),
        linear-gradient(180deg, rgba(20, 6, 46, 0.5) 0%, rgba(20, 6, 46, 0) 30%);
}

/* the WebGL canvas: a plain box until water.js has drawn a frame, then it fades in over .floor. It waits for the skylines
   and the wordmark to rise first, so a reflection never shows before the thing it reflects. */
.water {
    left: 0;
    right: 0;
    top: var(--horizon);
    bottom: 0;
    overflow: hidden;
}

.water canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease 0.7s;
}

.has-water .water canvas {
    opacity: 1;
}

.is-repeat .water canvas {
    transition-duration: 0.35s;
    transition-delay: 0s;
}

/* Baked reflection of the shore lights (the pre-WebGL look): only the fallback loads it, so a working WebGL
   visitor never downloads shore-refl.svg. `scripting: none` covers JS off; .no-water is set when WebGL fails. */
.shore-refl {
    position: absolute;
    inset: 0;
}

.no-water .shore-refl {
    background: url("login/shore-refl.svg?v=d7a1c6f4") 50% 0 / auto 100% no-repeat;
}

/* if WebGL comes up late (slow network) after the fallback was shown, the canvas wins */
.has-water .shore-refl {
    display: none;
}

@media (scripting: none) {
    .shore-refl {
        background: url("login/shore-refl.svg?v=d7a1c6f4") 50% 0 / auto 100% no-repeat;
    }

    .glints {
        display: block;
    }
}

/* light + texture overlays */
.spot {
    left: 0;
    top: 0;
    width: 620px;
    height: 620px;
    margin: -310px 0 0 -310px;
    background: radial-gradient(closest-side, rgba(0, 240, 255, 0.1), rgba(255, 56, 184, 0.04) 55%, transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: transform;
}

.spot.is-on {
    opacity: 1;
}

.grain {
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.scanlines {
    inset: 0;
    opacity: 0.55;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.18) 2px 3px);
}

.vignette {
    inset: 0;
    background: radial-gradient(125% 92% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.66) 100%);
}

.hud {
    inset: 0;
}

.hud i {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 0 solid rgba(0, 240, 255, 0.55);
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.5));
    animation: hud-in 0.9s var(--ease-out) 1.1s backwards;
}

.hud i:nth-child(1) { left: max(22px, env(safe-area-inset-left)); top: max(22px, env(safe-area-inset-top)); border-left-width: 2px; border-top-width: 2px; }
.hud i:nth-child(2) { right: max(22px, env(safe-area-inset-right)); top: max(22px, env(safe-area-inset-top)); border-right-width: 2px; border-top-width: 2px; }
.hud i:nth-child(3) { left: max(22px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); border-left-width: 2px; border-bottom-width: 2px; }
.hud i:nth-child(4) { right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); border-right-width: 2px; border-bottom-width: 2px; }

/* ------------------------------------------------------------------ stage */

.stage {
    position: relative;
    z-index: 2;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: max(64px, calc(var(--horizon) + var(--vh) * 2 - var(--title-h) / 2)) 20px 16px;
    text-align: center;
}

.lockup {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.season {
    position: absolute;
    top: var(--season-top);
    left: 0;
    right: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font: 700 13px/1 var(--ui);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #ffd6f3;
    text-shadow: 0 0 14px rgba(255, 56, 184, 0.85), 0 1px 0 rgba(0, 0, 0, 0.6);
    animation: rise 0.8s var(--ease-out) 0.3s backwards;
}

.season span {
    padding-left: 0.5em;
}

.season::before,
.season::after {
    content: "";
    width: clamp(34px, 8vw, 92px);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan));
    box-shadow: 0 0 10px var(--cyan);
}

.season::after {
    transform: scaleX(-1);
}

.title {
    margin: 0;
    font-size: 0;
    line-height: 0;
}

/* Only rendered when wordmark.svg is missing (partial deploy): keeps the h1 meaningful. */
.title-fallback {
    display: block;
    font: 700 clamp(28px, 7vw, 52px)/1.1 var(--ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd6f3;
    text-shadow: 0 0 22px rgba(255, 80, 220, 0.7);
}

.wordmark {
    display: block;
    width: var(--title-w);
    height: auto;
    margin: 0 auto;
    overflow: visible;
    filter: drop-shadow(0 0 22px rgba(255, 80, 220, 0.5)) drop-shadow(0 10px 32px rgba(5, 2, 18, 0.9));
}

.wm-halo .wm-l { fill: #f7ecff; stroke: #f7ecff; stroke-width: 52; stroke-linejoin: round; }
.wm-edge .wm-l { fill: url(#wm-edge); stroke: url(#wm-edge); stroke-width: 30; stroke-linejoin: round; }
.wm-fill .wm-l { fill: url(#wm-fill); }
.wm-rim .wm-l { fill: #fff; stroke: none; }
.wm-rp-halo .wm-l { fill: #e6f5ff; stroke: #e6f5ff; stroke-width: 74; stroke-linejoin: round; }
.wm-rp-edge .wm-l { fill: #46aaff; stroke: #46aaff; stroke-width: 44; stroke-linejoin: round; }
.wm-rp-fill .wm-l { fill: url(#wm-rp-fill); }

.wm-l {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: wm-in 0.75s var(--ease-out) backwards;
    animation-delay: calc(0.38s + var(--i, 0) * 0.055s);
}

.wm-sub .wm-l {
    animation-delay: calc(0.92s + var(--i, 0) * 0.08s);
}

.wm-rule {
    filter: drop-shadow(0 0 10px rgba(80, 190, 255, 0.9));
    transform-box: fill-box;
    animation: rule-in 0.7s var(--ease-out) 1s backwards;
}

.wm-rule-l { transform-origin: 100% 50%; }
.wm-rule-r { transform-origin: 0 50%; }

/* Gloss + sweep are clipped to the finished glyphs, so they wait until the last letter has landed (0.38 + 7 * 0.055 + 0.75s). */
.wm-shine {
    animation: fade-in 0.5s ease 1.5s backwards;
}

.wm-gloss { pointer-events: none; }

.wm-sweep {
    opacity: 0.55;
    transform: skewX(-18deg);
    animation: wm-sweep 11s linear 1.9s infinite;
}

.tagline {
    --tag-track: 0.34em;
    position: relative;
    isolation: isolate;
    margin: clamp(8px, calc(var(--vh) * 2), 18px) 0 0;
    padding-left: var(--tag-track);
    font: 700 max(clamp(14px, 2.3vw, 22px), min(28px, calc(var(--title-w) * 0.03)))/1.2 var(--ui);
    letter-spacing: var(--tag-track);
    text-transform: uppercase;
    color: rgba(120, 150, 255, 0.38);
    -webkit-text-stroke: 1.5px #a3c0ff;
    text-shadow: 0 0 14px rgba(70, 120, 255, 0.85), 0 0 34px rgba(70, 120, 255, 0.35), 0 2px 18px rgba(3, 3, 6, 0.9);
    animation: tagline-in 1.1s var(--ease-out) 1.05s backwards;
}

.tagline::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -16px -10%;
    background: radial-gradient(closest-side, rgba(3, 3, 6, 0.66), transparent);
    pointer-events: none;
}

/* ------------------------------------------------------------------ sign-in */

.access {
    position: relative;
    isolation: isolate;
    width: min(440px, 100%);
    margin-top: clamp(12px, calc(var(--vh) * 3.4), 36px);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: rise 0.9s var(--ease-out) 1.2s backwards;
}

.access::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -34px calc(min(90px, 4vw) * -1) -26px;
    background: radial-gradient(closest-side, rgba(3, 3, 6, 0.82), rgba(3, 3, 6, 0.55) 62%, rgba(3, 3, 6, 0));
    pointer-events: none;
}

/* Notices are a toast in the empty sky, never in the flow: an error must not shift the layout or cover the button. */
.alerts {
    position: fixed;
    z-index: 5;
    top: max(76px, calc(env(safe-area-inset-top) + 68px));
    left: 0;
    right: 0;
    width: min(576px, calc(100% - 16px));
    margin: 0 auto;
    padding: 0 8px 26px;
    display: grid;
    gap: 8px;
    max-height: min(40vh, 320px);
    overflow: auto;
    overscroll-behavior: contain;
    pointer-events: none;
    animation: alert-in 0.7s var(--ease-out) 0.15s backwards;
}

.alert {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-left-width: 4px;
    border-radius: 4px;
    background: rgba(4, 3, 12, 0.92);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 240, 255, 0.12);
    color: var(--text);
    font: 500 14px/1.45 var(--ui);
    text-align: left;
    overflow-wrap: anywhere;
    pointer-events: auto;
}

.alert-error {
    border-color: rgba(255, 56, 184, 0.75);
    background: rgba(40, 4, 26, 0.9);
    color: #ffe1f3;
}

.alert-success {
    border-color: rgba(223, 255, 99, 0.65);
    color: #f6ffd0;
}

.cta-wrap {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 0 18px rgba(255, 56, 184, 0.42)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
    transition: filter 0.3s ease;
}

.cta-wrap:hover {
    filter: drop-shadow(0 0 30px rgba(255, 56, 184, 0.75)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.cta-wrap:has(.cta:focus-visible) {
    outline: 2px solid #fff;
    outline-offset: 7px;
}

.cta {
    position: relative;
    display: block;
    width: 100%;
    min-height: 62px;
    color: #17000e;
    text-decoration: none;
    background: linear-gradient(180deg, #ffd0f0, #ff8edb 45%, #ff4fbd);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* The face is in flow (not absolute) so the button grows with large text instead of clipping its label. */
.cta-face {
    position: relative;
    display: grid;
    grid-template-columns: 26px 1fr 22px;
    align-items: center;
    column-gap: 14px;
    min-height: 58px;
    margin: 2px;
    padding: 10px 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffb8e7 0, #ff65ca 8%, #ff3cb5 48%, #f82aa5 49%, #ff4bb6 100%);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    font: 700 17px/1 var(--ui);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: filter 0.2s ease, transform 0.12s ease;
}

.cta-face::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.cta-face::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: cta-glint 6.5s ease-in-out 3s infinite;
    pointer-events: none;
}

.cta:hover .cta-face {
    filter: brightness(1.09) saturate(1.1);
}

.cta:hover .cta-face::after {
    animation: cta-glint-once 0.9s ease-out backwards;
}

.cta:active .cta-face {
    filter: brightness(0.94);
    transform: translateY(1px);
}

/* Focus ring: :focus fallback for engines without :focus-visible, refined by :focus-visible where it exists. */
.cta:focus .cta-face {
    box-shadow: inset 0 0 0 3px #fff;
}

.cta:focus:not(:focus-visible) .cta-face {
    box-shadow: none;
}

.cta-glyph {
    width: 26px;
    height: 26px;
    fill: currentColor;
    transition: opacity 0.2s ease;
}

.cta-arrow {
    width: 20px;
    height: 20px;
    justify-self: end;
    transition: transform 0.25s var(--ease-out);
}

.cta:hover .cta-arrow {
    transform: translateX(5px);
}

.cta-label {
    display: grid;
    justify-items: center;
}

.cta-label > span {
    grid-area: 1 / 1;
    text-align: center;
    line-height: 1.15;
    transition: opacity 0.2s ease;
}

.cta-busy {
    opacity: 0;
}

.cta-busy::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    text-align: left;
}

.cta-spinner {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border: 3px solid rgba(23, 0, 14, 0.22);
    border-top-color: #17000e;
    border-radius: 50%;
    opacity: 0;
}

.cta.is-connecting {
    pointer-events: none;
}

.cta.is-connecting .cta-idle,
.cta.is-connecting .cta-glyph {
    opacity: 0;
}

.cta.is-connecting .cta-busy,
.cta.is-connecting .cta-spinner {
    opacity: 1;
}

/* Progress animations only run while connecting (they are essential feedback, never paused or disabled by the motion control). */
.cta.is-connecting .cta-spinner {
    animation: spin 0.8s linear infinite;
}

.cta.is-connecting .cta-busy::after {
    animation: dots 1.2s steps(4, end) infinite;
}

.cta-hint {
    width: 100%;
    margin: clamp(8px, calc(var(--vh) * 1.6), 14px) 0 0;
    font: 500 12.5px/1.5 var(--ui);
    color: var(--muted);
    text-wrap: balance;
    text-shadow: 0 1px 12px rgba(3, 3, 6, 0.95);
}

/* Secondary action: a ghost button in the same chamfered language as the primary CTA, so pink stays the hero. */
.join {
    position: relative;
    display: block;
    width: min(320px, 100%);
    margin-top: clamp(8px, calc(var(--vh) * 1.6), 14px);
    color: #d8fbff;
    text-decoration: none;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.8), rgba(160, 120, 255, 0.75) 55%, rgba(255, 56, 184, 0.8));
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.18));
    transition: filter 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.join-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: clamp(38px, calc(var(--vh) * 5.6), 46px);
    margin: 1.5px;
    padding: 8px 18px;
    background: linear-gradient(180deg, rgba(12, 7, 30, 0.94), rgba(4, 3, 12, 0.96));
    clip-path: polygon(10.5px 0, 100% 0, 100% calc(100% - 10.5px), calc(100% - 10.5px) 100%, 0 100%, 0 10.5px);
    font: 700 14px/1.1 var(--ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    transition: background 0.25s ease, color 0.25s ease;
}

.join-arrow {
    flex: none;
    transition: transform 0.25s var(--ease-out);
}

.join:hover {
    filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.5)) drop-shadow(0 0 22px rgba(255, 56, 184, 0.28));
}

.join:hover .join-face {
    background: linear-gradient(180deg, rgba(26, 15, 62, 0.95), rgba(10, 6, 26, 0.97));
    color: #fff;
}

.join:hover .join-arrow {
    transform: translate(2px, -2px);
}

.join:active .join-face {
    filter: brightness(0.9);
}

.join:focus .join-face {
    box-shadow: inset 0 0 0 2px #fff;
}

.join:focus:not(:focus-visible) .join-face {
    box-shadow: none;
}

.status {
    margin: 0;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 14px;
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 3px;
    background: rgba(3, 3, 6, 0.7);
    font: 700 12px/1 var(--ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d8fbff;
    animation: fade-in 0.6s ease backwards;
}

.status[hidden] {
    display: none;
}

.status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c7c93;
}

.status[data-state="online"] .status-dot {
    background: var(--lime);
    box-shadow: 0 0 10px rgba(223, 255, 99, 0.85);
}

/* The pulse is a transform/opacity ring: animating box-shadow would keep the main thread busy for the whole visit. */
.status[data-state="online"] .status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(223, 255, 99, 0.6);
    animation: pulse-ring 2.2s ease-out infinite;
}

.status[data-state="offline"] {
    border-color: rgba(255, 56, 184, 0.4);
    color: #ffd6f0;
}

.status[data-state="offline"] .status-dot {
    background: var(--pink);
}

.status-text {
    white-space: nowrap;
}

.foot {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px 20px;
    padding: 12px max(68px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(68px, env(safe-area-inset-left));
    font: 500 12px/1.4 var(--ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    animation: fade-in 1s ease 1.4s backwards;
}

/* scrim so the water and its glints never crowd the small footer text */
.foot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(3, 3, 6, 0.6));
    pointer-events: none;
}

.foot-brand {
    justify-self: start;
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-self: end;
    gap: 4px 10px;
}

.foot-nav {
    display: flex;
    gap: 4px 10px;
}

.foot a,
.foot-links button {
    min-height: 24px;
    padding: 8px 6px;
    color: #d8fbff;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.foot a:hover,
.foot-links button:hover {
    color: var(--cyan);
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.7);
}

.foot a:focus,
.foot-links button:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.foot a:focus:not(:focus-visible),
.foot-links button:focus:not(:focus-visible) {
    outline: none;
}

/* ------------------------------------------------------------------ motion */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes alert-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes shore-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes glint-a { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes glint-b { from { transform: translateX(2.5%); } to { transform: translateX(-2.5%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hud-in { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes moon-rise { from { opacity: 0; transform: translateY(18%) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes bloom { from { opacity: 0.72; transform: scale(0.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes skyline-rise { from { opacity: 0; transform: translateY(26%); } to { opacity: 1; transform: none; } }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes shoot {
    0%, 93% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-25deg); }
    94% { opacity: 0.95; }
    100% { opacity: 0; transform: translate3d(-420px, 196px, 0) rotate(-25deg); }
}
@keyframes wm-in { from { opacity: 0; transform: translateY(-24%) scale(1.16); } to { opacity: 1; transform: none; } }
@keyframes rule-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes wm-sweep {
    0% { transform: skewX(-18deg) translateX(0); }
    12%, 100% { transform: skewX(-18deg) translateX(7000px); }
}
@keyframes tagline-in { from { opacity: 0; letter-spacing: calc(var(--tag-track) * 2); } to { opacity: 1; letter-spacing: var(--tag-track); } }
@keyframes cta-glint {
    0%, 62% { transform: translateX(-140%) skewX(-18deg); }
    82%, 100% { transform: translateX(420%) skewX(-18deg); }
}
@keyframes cta-glint-once { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
@keyframes pulse-ring { from { transform: scale(1); opacity: 0.6; } 70%, to { transform: scale(3.25); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

/* Returning visitors in the same session skip the choreography, not the ambience. */
.is-repeat .sky,
.is-repeat .stars,
.is-repeat .bf,
.is-repeat .moon,
.is-repeat .skyline,
.is-repeat .shore,
.is-repeat .glints,
.is-repeat .haze,
.is-repeat .floor,
.is-repeat .hud i,
.is-repeat .season,
.is-repeat .wm-l,
.is-repeat .wm-rule,
.is-repeat .wm-shine,
.is-repeat .tagline,
.is-repeat .access,
.is-repeat .alerts,
.is-repeat .status,
.is-repeat .foot {
    animation: none;
}

.is-repeat .wm-sweep {
    animation: wm-sweep 11s linear 1.2s infinite;
}

/*
 * Ambient motion: every infinite decorative loop, and nothing else. Entrance animations and the
 * "connecting" progress indicator are deliberately not in this list.
 *  .is-paused  set while the tab is hidden (login.js toggles it from visibilitychange only)
 *  .is-still   the visitor pressed "Pause motion", or prefers reduced motion (WCAG 2.2.2)
 * The WebGL water is a JS loop, not a CSS animation: assets/water.js watches these same classes (and
 * prefers-reduced-motion), stops its loop and leaves one still frame. Its fallback (.glints below) is in this list.
 */
.is-paused .stars .stars-b,
.is-paused .stars .stars-c,
.is-paused .shooting-star,
.is-paused .glints::before,
.is-paused .glints::after,
.is-paused .moon-bloom,
.is-paused .wm-sweep,
.is-paused .cta-face::after,
.is-paused .status-dot::after {
    animation-play-state: paused;
}

.is-still .stars .stars-b,
.is-still .stars .stars-c,
.is-still .shooting-star,
.is-still .glints::before,
.is-still .glints::after,
.is-still .moon-bloom,
.is-still .wm-sweep,
.is-still .cta-face::after,
.is-still .status-dot::after {
    animation: none !important;
}

/* ------------------------------------------------------------------ adaptive */

@media (max-width: 640px) {
    :root {
        --horizon: calc(var(--vh) * 50);
        --moon: min(calc(var(--vh) * 56), 108vw, calc((var(--horizon) - var(--season-band)) / 0.82));
        --title-w: min(94vw, calc(var(--vh) * 118));
    }

    .season {
        gap: 10px;
        font-size: 12px;
        letter-spacing: 0.4em;
    }

    .tagline {
        --tag-track: 0.22em;
    }

    /* compact footer: brand line dropped, chip + links stack tightly so it fits 640px-tall phones */
    .foot {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
        padding-top: 6px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        text-align: center;
    }

    .foot-brand {
        display: none;
    }

    .foot-links,
    .status {
        justify-self: center;
    }

    .foot-links {
        justify-content: center;
    }

    .foot a,
    .foot-links button {
        padding: 6px;
    }

    .cta-hint {
        margin-top: 10px;
    }

    .hud i {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 640px) and (max-height: 720px) {
    :root {
        --horizon: calc(var(--vh) * 45);
    }

    .cta {
        min-height: 56px;
    }

    .cta-face {
        min-height: 52px;
    }

    .cta-hint {
        font-size: 12px;
    }
}

@media (max-width: 640px) and (max-height: 620px) {
    :root {
        --horizon: calc(var(--vh) * 42);
    }
}

@media (min-width: 1600px) and (min-height: 900px) {
    :root {
        --title-w: min(920px, 60vw, calc(var(--vh) * 100));
    }
}

/* Shorter laptops/desktops: a lower horizon and a slightly smaller wordmark make room for the sign-in stack. */
@media (max-height: 840px) and (min-width: 700px) {
    :root {
        --horizon: calc(var(--vh) * 47);
        --title-w: min(720px, 80vw, calc(var(--vh) * 88));
    }
}

@media (max-height: 700px) and (min-width: 700px) {
    :root {
        --horizon: calc(var(--vh) * 44);
        --title-w: min(640px, 80vw, calc(var(--vh) * 84));
    }

    .foot {
        padding-block: 8px 10px;
    }
}

@media (max-width: 420px) {
    .join {
        width: 100%;
    }

    .join-face {
        font-size: 13px;
        letter-spacing: 0.1em;
    }

    .cta-face {
        grid-template-columns: 24px 1fr 18px;
        column-gap: 10px;
        padding-inline: 16px;
        font-size: 15px;
        letter-spacing: 0.06em;
    }

    .cta-glyph {
        width: 24px;
        height: 24px;
    }

    .cta-arrow {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 360px) {
    .cta-face {
        grid-template-columns: 22px 1fr;
        padding-inline: 14px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .cta-arrow {
        display: none;
    }

    .cta-glyph {
        width: 22px;
        height: 22px;
    }

    .season {
        letter-spacing: 0.3em;
    }
}

/* Short viewports (landscape phones, and zoomed-in laptops): the hint stays, the decorative label goes. */
@media (max-height: 620px) and (orientation: landscape) {
    :root {
        --horizon: calc(var(--vh) * 50);
        --moon: calc(var(--vh) * 60);
        --title-w: min(520px, 56vw);
    }

    .season {
        display: none;
    }

    .foot-brand {
        visibility: hidden;
    }

    .stage {
        padding-top: 18px;
    }

    .cta-hint {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .join {
        width: min(260px, 100%);
    }
}

/* Short viewports: notices flow above the lockup (the page scrolls) so they can never sit on the button. */
@media (max-height: 620px) {
    .alerts {
        position: relative;
        top: auto;
        max-height: none;
        padding-top: max(12px, env(safe-area-inset-top));
        animation: none;
    }
}

@media (hover: none) {
    .spot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .shooting-star,
    .spot,
    .motion-toggle {
        display: none;
    }
}

@media (forced-colors: active) {
    .scene {
        display: none;
    }

    .stage {
        padding-top: 32px;
    }

    .wm-halo,
    .wm-edge,
    .wm-rim,
    .wm-shine,
    .wm-rp-halo,
    .wm-rp-edge,
    .wm-rule {
        display: none;
    }

    .wm-fill .wm-l,
    .wm-rp-fill .wm-l {
        fill: CanvasText;
    }

    .tagline {
        -webkit-text-stroke: 0;
        color: CanvasText;
        text-shadow: none;
    }

    .cta {
        clip-path: none;
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .cta-face {
        clip-path: none;
        background: none;
    }

    .cta-face::before,
    .cta-face::after {
        display: none;
    }

    .cta-wrap,
    .cta-wrap:hover {
        filter: none;
    }

    .join {
        clip-path: none;
        filter: none;
        border: 2px solid LinkText;
        background: Canvas;
        color: LinkText;
    }

    .join-face {
        clip-path: none;
        margin: 0;
        background: none;
    }

    .status {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .status-dot::after {
        display: none;
    }
}

/* ---- generated star fields (tools/build_art.py) ---- */
.stars-a{box-shadow:23.8vw 24.9vh #dff6ff,91.6vw 20.1vh #bfeaff,6.6vw 0.1vh #ffe3f7,25.9vw 6.8vh #ffe3f7,54.1vw 25.3vh #ffe3f7,63.9vw 3.4vh #fff,86.8vw 23.4vh #fff,67.1vw 0.9vh #bfeaff,4.3vw 43.6vh #dff6ff,47.3vw 38.4vh #ffe3f7,71.4vw 56.3vh #ffe3f7,72.8vw 27.3vh #fff,87.9vw 1.7vh #fff,49.5vw 7.8vh #ffe3f7,77.9vw 50.2vh #ffe3f7,50.7vw 14.6vh #dff6ff,53.4vw 15.9vh #fff,90.4vw 35.4vh #fff,85.6vw 63.1vh #fff,69.9vw 11.3vh #bfeaff,90.5vw 26.7vh #fff,63.3vw 62.8vh #dff6ff,28.5vw 0.9vh #ffe3f7,8.9vw 45.3vh #ffe3f7,89.7vw 0.2vh #ffe3f7,76.9vw 51.8vh #fff,60.5vw 42.0vh #ffe3f7,71.8vw 11.5vh #dff6ff,50.5vw 63.9vh #dff6ff,0.7vw 2.0vh #bfeaff,3.1vw 5.2vh #ffe3f7,29.2vw 8.1vh #fff,98.0vw 12.0vh #dff6ff,95.9vw 54.0vh #ffe3f7,37.7vw 51.6vh #ffe3f7,64.4vw 28.7vh #bfeaff,10.3vw 61.3vh #bfeaff,27.1vw 31.6vh #fff,93.6vw 17.8vh #dff6ff,52.1vw 25.2vh #fff,78.8vw 62.8vh #dff6ff,2.0vw 30.2vh #fff,6.0vw 31.1vh #ffe3f7,35.3vw 56.0vh #bfeaff,70.7vw 40.0vh #fff,58.9vw 59.6vh #fff,96.3vw 7.5vh #ffe3f7,29.9vw 29.1vh #fff,36.4vw 10.6vh #dff6ff,84.4vw 8.1vh #ffe3f7,10.5vw 46.4vh #bfeaff,68.4vw 2.8vh #bfeaff,22.3vw 45.6vh #fff,32.8vw 35.0vh #fff,10.2vw 11.0vh #dff6ff,67.5vw 6.3vh #fff,8.0vw 40.3vh #fff,88.5vw 18.6vh #fff,78.7vw 0.3vh #fff,31.5vw 48.5vh #bfeaff,18.4vw 8.8vh #fff,80.6vw 12.3vh #fff,42.1vw 23.1vh #dff6ff,46.5vw 31.6vh #dff6ff,42.0vw 16.0vh #ffe3f7,15.6vw 0.0vh #bfeaff,98.7vw 17.6vh #fff,3.2vw 19.0vh #bfeaff,96.3vw 24.9vh #fff,86.2vw 50.5vh #dff6ff,12.0vw 7.2vh #fff,90.4vw 36.3vh #fff,89.7vw 54.3vh #bfeaff,4.9vw 20.6vh #fff,17.2vw 9.9vh #fff,52.5vw 16.3vh #bfeaff,11.4vw 2.6vh #bfeaff,47.7vw 43.7vh #dff6ff,22.1vw 2.5vh #fff,17.1vw 44.6vh #fff,82.3vw 0.0vh #bfeaff,86.3vw 0.6vh #dff6ff,24.8vw 30.4vh #bfeaff,42.3vw 20.0vh #fff,85.7vw 43.1vh #fff,12.5vw 1.0vh #fff,85.4vw 1.4vh #bfeaff,49.0vw 3.6vh #fff,35.1vw 32.6vh #bfeaff,30.4vw 8.2vh #dff6ff,42.9vw 2.6vh #fff,71.6vw 14.3vh #fff,56.7vw 0.5vh #ffe3f7,60.4vw 43.8vh #ffe3f7,63.7vw 0.5vh #ffe3f7,5.3vw 31.1vh #dff6ff,42.1vw 36.3vh #ffe3f7,1.8vw 6.1vh #dff6ff,69.5vw 1.1vh #ffe3f7,22.4vw 2.7vh #fff,93.6vw 13.9vh #bfeaff,79.1vw 8.0vh #ffe3f7,69.1vw 58.1vh #bfeaff,79.2vw 34.2vh #dff6ff,56.4vw 1.9vh #bfeaff,71.7vw 20.1vh #fff,77.4vw 0.5vh #fff,56.4vw 33.5vh #ffe3f7,17.9vw 0.2vh #fff,2.5vw 2.2vh #ffe3f7,83.6vw 59.3vh #bfeaff,29.9vw 1.5vh #bfeaff,51.1vw 38.1vh #fff,55.4vw 1.8vh #bfeaff,6.1vw 11.2vh #bfeaff,18.0vw 1.2vh #fff,64.6vw 18.8vh #ffe3f7,25.3vw 29.0vh #dff6ff,55.7vw 60.7vh #ffe3f7,50.0vw 61.3vh #ffe3f7,84.4vw 60.8vh #ffe3f7,69.1vw 41.5vh #bfeaff,68.6vw 3.6vh #ffe3f7,89.7vw 3.4vh #fff,49.8vw 20.7vh #bfeaff,95.1vw 28.0vh #fff,13.6vw 41.1vh #fff,58.6vw 10.7vh #fff,85.1vw 24.5vh #dff6ff,67.1vw 50.2vh #bfeaff}
.stars-b{box-shadow:46.3vw 13.9vh #fff,18.6vw 34.9vh #aef4ff,50.3vw 54.2vh #fff,33.4vw 57.8vh #ffb4ee,4.1vw 14.2vh #ffb4ee,94.6vw 59.2vh #aef4ff,15.7vw 6.9vh #fff,13.2vw 51.7vh #ffb4ee,6.3vw 35.9vh #ffb4ee,88.7vw 56.1vh #fff,67.4vw 38.9vh #aef4ff,89.0vw 42.9vh #fff,39.7vw 12.1vh #fff,19.9vw 53.1vh #aef4ff,5.5vw 14.2vh #aef4ff,13.9vw 6.9vh #ffb4ee,90.6vw 2.2vh #ffb4ee,0.4vw 42.2vh #fff,89.5vw 5.4vh #fff,89.2vw 2.8vh #fff,50.1vw 27.0vh #ffb4ee,92.1vw 16.7vh #aef4ff,19.2vw 42.2vh #ffb4ee,58.0vw 4.2vh #ffb4ee,72.0vw 0.5vh #aef4ff,55.5vw 29.5vh #fff,74.5vw 39.9vh #ffb4ee,99.8vw 2.4vh #ffb4ee,40.2vw 54.9vh #fff,61.1vw 0.5vh #aef4ff,84.6vw 23.4vh #ffb4ee,77.5vw 1.4vh #aef4ff,11.0vw 52.7vh #aef4ff,45.1vw 15.6vh #ffb4ee,74.6vw 14.2vh #ffb4ee,32.9vw 17.5vh #fff,22.2vw 8.4vh #fff,30.7vw 9.1vh #ffb4ee,78.4vw 0.2vh #ffb4ee,80.8vw 21.7vh #ffb4ee,77.8vw 26.5vh #fff,42.5vw 6.6vh #aef4ff,51.0vw 59.7vh #ffb4ee,36.9vw 34.2vh #fff,69.3vw 52.1vh #fff,5.1vw 61.6vh #fff}
.stars-c{box-shadow:16.5vw 36.0vh #ffb4ee,28.1vw 49.1vh #aef4ff,80.8vw 22.7vh #ffb4ee,52.8vw 44.3vh #fff,37.1vw 27.9vh #fff,14.5vw 41.1vh #fff,69.4vw 17.7vh #ffb4ee,77.1vw 15.9vh #aef4ff,3.4vw 11.4vh #aef4ff,69.4vw 32.7vh #aef4ff,2.3vw 40.2vh #fff,12.5vw 57.0vh #aef4ff,16.1vw 39.2vh #aef4ff,48.5vw 4.8vh #fff,47.0vw 47.1vh #fff,78.0vw 5.6vh #ffb4ee}