@charset "UTF-8";
* {
    margin: 0;
}

html,
body,
div {
    display: grid;
}

html {
    height: 100%;
}

body {
    grid-template-rows: -webkit-max-content 1fr;
    grid-template-rows: max-content 1fr;
    overflow: hidden;
    background: #212121;
    color: #ededed;
    font: clamp(0.75em, 2.5vmin, 2em) ubuntu mono, trebuchet ms, sans-serif;
}

.scene {
    perspective: 27.5em;
}
.scene::after {
    background: #212121;
    -webkit-mask: linear-gradient(
        transparent calc(50% + var(--r) + 2 * var(--r1)),
        #fff7 0,
        red
    );
    mask: linear-gradient(
        transparent calc(50% + var(--r) + 2 * var(--r1)),
        #fff7 0,
        red
    );
    content: "";
}

.scene div {
    place-self: center;
}

.scene div,
.scene::after,
[type="radio"],
[for] {
    grid-area: 1/1;
}

.🌐 {
    transform-style: preserve-3d;
    -webkit-animation: ry 16s linear infinite;
    animation: ry 16s linear infinite;
}

@-webkit-keyframes ry {
    to {
        rotate: y 1turn;
    }
}

@keyframes ry {
    to {
        rotate: y 1turn;
    }
}
.dot {
    --b: 0;
    padding: calc((1 - var(--b)) * var(--r0) + var(--b) * var(--r1));
    border-radius: 50%;
    translate: var(--x) var(--y) var(--z);
    background: radial-gradient(at 27% 32%, #fffd, transparent),
        radial-gradient(at 65% 85%, #fff9, transparent 65%);
    background-color: color-mix(in hsl, var(--c) calc(var(--b) * 100%));
    filter: saturate(2);
    -webkit-animation: ry 16s linear infinite reverse,
        shade 8s linear calc(var(--u) * -1 * 16s) infinite alternate;
    animation: ry 16s linear infinite reverse,
        shade 8s linear calc(var(--u) * -1 * 16s) infinite alternate;
}
.dot.s1 {
    --b: 1;
}
.dot::before,
.dot::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    content: "";
}
.dot::before {
    background: radial-gradient(
        at 15% 15%,
        transparent 57.5%,
        #0004 65%,
        transparent 85%
    );
    -webkit-mask: linear-gradient(45deg, transparent 25%, red);
    mask: linear-gradient(45deg, transparent 25%, red);
}
.dot::after {
    translate: 0 calc(2 * (2 * var(--r1) + var(--r) - var(--y)));
}

@-webkit-keyframes shade {
    to {
        filter: saturate(2) brightness(0.2);
    }
}

@keyframes shade {
    to {
        filter: saturate(2) brightness(0.2);
    }
}
/* --- theme switching styles --- */
[role="group"] {
    grid-gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, 2.25rem);
    padding: 0.5rem;
}

p {
    grid-column: 1/-1;
}

[type="radio"],
[for] {
    cursor: pointer;
}

[type="radio"] {
    opacity: 0.001;
}
[type="radio"]:not(:checked) + [for] {
    opacity: 0.35;
}

[for] {
    border: solid 2px currentcolor;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 2px 2px 3px #000;
    background: linear-gradient(
            45deg,
            color-mix(in hsl, var(--c) 0%) 50%,
            color-mix(in hsl, var(--c) 100%) 0
        )
        #fff5;
    background-blend-mode: screen;
}