:root {
    --planet-color: #70c8ff;
    --planet-rgb: 112, 200, 255;
    --relief: .58;
    --halo: .42;
    --planet-size: 68vmin;
    --panel-bg: rgba(10, 15, 28, .78);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #02050b;
    color: #f6f9ff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
    font: inherit;
}

.space {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 68% 36%, rgba(5, 17, 38, .42), transparent 34%),
        radial-gradient(circle at 30% 80%, rgba(16, 5, 18, .24), transparent 36%),
        linear-gradient(180deg, #03050b 0%, #010309 55%, #02030a 100%);
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.planet-wrap {
    position: relative;
    width: var(--planet-size);
    aspect-ratio: 1;
    transform: translate(17vw, -2vh);
    filter: drop-shadow(0 0 1.6rem rgba(var(--planet-rgb), calc(var(--halo) * .28)));
}

.planet-wrap::before,
.planet-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.planet-wrap::before {
    inset: -4.5%;
    z-index: -2;
    background: rgba(var(--planet-rgb), calc(.2 + var(--halo) * .22));
    filter: blur(calc(12px + var(--halo) * 28px));
    opacity: calc(.28 + var(--halo) * .58);
}

.planet-wrap::after {
    inset: -11%;
    z-index: -3;
    background: radial-gradient(
        circle,
        rgba(var(--planet-rgb), calc(.14 + var(--halo) * .12)) 0 40%,
        rgba(var(--planet-rgb), calc(.08 + var(--halo) * .09)) 52%,
        transparent 72%
    );
    filter: blur(calc(18px + var(--halo) * 34px));
}

.planet {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 26%),
        radial-gradient(circle at 58% 57%, rgba(7,59,112,.26), transparent 32%),
        radial-gradient(circle at 42% 72%, rgba(255,255,255,.10), transparent 18%),
        linear-gradient(135deg,
            rgba(220, 245, 255, .82),
            var(--planet-color) 40%,
            rgba(24, 119, 196, .96) 76%,
            rgba(5, 35, 74, .98)
        );
    box-shadow:
        inset 18px 14px 28px rgba(255,255,255,.15),
        inset -34px -28px 52px rgba(0,14,42,.40),
        0 0 calc(12px + var(--halo) * 22px) rgba(var(--planet-rgb), calc(.32 + var(--halo) * .35));
    transform: rotate(-9deg);
}

.planet::before {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            ellipse at 44% 34%,
            rgba(255,255,255,calc(.015 + var(--relief) * .08)) 0 1.4%,
            rgba(0,41,93,calc(.015 + var(--relief) * .07)) 1.6% 3.2%,
            transparent 3.5% 5.8%
        );
    transform: rotate(18deg) scale(1.08, .92);
    mix-blend-mode: soft-light;
    opacity: calc(.25 + var(--relief) * .62);
}

.planet::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 31% 40%, transparent 0 50%, rgba(0, 17, 55, .28) 75%, rgba(0, 9, 30, .52) 100%),
        radial-gradient(circle at 68% 25%, rgba(255,255,255,.12), transparent 24%);
    box-shadow: inset -18px -10px 28px rgba(0, 12, 38, .24);
    pointer-events: none;
}

.planet-texture {
    position: absolute;
    border-radius: 45% 55% 52% 48% / 49% 44% 56% 51%;
    mix-blend-mode: overlay;
    opacity: calc(.16 + var(--relief) * .50);
    filter: blur(calc(2px - var(--relief) * 1.2px));
}

.texture-a {
    width: 74%;
    height: 42%;
    left: -4%;
    top: 27%;
    transform: rotate(16deg);
    background:
        repeating-linear-gradient(
            17deg,
            rgba(228,248,255,.18) 0 5px,
            rgba(20,101,164,.20) 7px 15px,
            transparent 17px 25px
        ),
        radial-gradient(ellipse, rgba(241,252,255,.22), rgba(28,110,174,.12) 50%, transparent 72%);
}

.texture-b {
    width: 58%;
    height: 56%;
    right: 4%;
    top: 10%;
    transform: rotate(-20deg);
    background:
        repeating-radial-gradient(
            ellipse,
            rgba(232,249,255,.16) 0 8px,
            rgba(19,91,155,.18) 11px 19px,
            transparent 22px 32px
        );
}

.texture-c {
    width: 67%;
    height: 33%;
    left: 21%;
    bottom: 9%;
    transform: rotate(-11deg);
    background:
        repeating-linear-gradient(
            -21deg,
            rgba(255,255,255,.14) 0 6px,
            rgba(9,69,130,.18) 8px 13px,
            transparent 16px 23px
        );
}

.planet-light {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.28), transparent 19%),
        linear-gradient(118deg, rgba(255,255,255,.10), transparent 44%);
    mix-blend-mode: screen;
}

.settings-button {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    z-index: 4;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: rgba(79, 86, 100, .40);
    color: rgba(235, 239, 248, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    opacity: 0;
    transform: scale(.78) rotate(-35deg);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, background .2s ease;
    cursor: pointer;
}

.space.controls-visible .settings-button {
    opacity: .86;
    transform: scale(1) rotate(0);
    pointer-events: auto;
}

.settings-button:hover,
.settings-button:focus-visible {
    background: rgba(110, 120, 138, .56);
    opacity: 1;
}

.settings-button span {
    font-size: 24px;
    line-height: 1;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 5;
    width: min(390px, calc(100vw - 24px));
    height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
    background: var(--panel-bg);
    border-left: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    transform: translateX(104%);
    transition: transform .28s cubic-bezier(.22,.8,.25,1);
    box-shadow: -20px 0 55px rgba(0,0,0,.30);
}

.settings-panel.open {
    transform: translateX(0);
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 34px;
}

.eyebrow {
    margin: 0 0 3px;
    color: rgba(219,229,246,.58);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: 27px;
    font-weight: 720;
    letter-spacing: -.03em;
}

.icon-button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

.control {
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
    color: rgba(246,249,255,.92);
    font-size: 14px;
    font-weight: 600;
}

.control span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.control output {
    color: rgba(218,231,249,.62);
    font-variant-numeric: tabular-nums;
}

input[type="color"] {
    width: 100%;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.07);
    cursor: pointer;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--planet-color);
}

.reset-button {
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
}

.hint {
    margin: 20px 0 0;
    color: rgba(217,226,240,.48);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 820px) {
    .planet-wrap {
        width: min(var(--planet-size), 82vw);
        transform: translate(15vw, -8vh);
    }
}

@media (max-width: 560px) {
    :root {
        --planet-size: 74vmin;
    }

    .planet-wrap {
        width: min(var(--planet-size), 88vw);
        transform: translate(14vw, -11vh);
    }

    .settings-button {
        width: 48px;
        height: 48px;
    }

    .settings-panel {
        top: auto;
        bottom: 0;
        width: 100%;
        height: min(72dvh, 620px);
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.10);
        border-radius: 24px 24px 0 0;
        transform: translateY(105%);
    }

    .settings-panel.open {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-panel,
    .settings-button {
        transition: none;
    }
}