.orbit-menu {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.orbit-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max-content;

    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    color: #dff5ff;
    text-align: var(--align, center);
    text-decoration: none;

    pointer-events: auto;
    transition: color 0.2s, filter 0.2s;
    filter: drop-shadow(0 0 8px rgb(223 245 255 / 55%));
    font-family: "Michroma", sans-serif;
    font-size: 14px;
}
.orbit-item svg {
    width: 40px;
    height: 40px;
    object-fit: contain;
    stroke: #dff5ff;
    border: 1px solid #dff5ff;
    border-radius: 50%;
    padding: 5px;
    min-width: 40px;
    min-height: 40px;
}
.orbit-item span {
    position: absolute;
}
.orbit-item:hover, .orbit-item:focus-visible {
    color: #43e7ff;
    filter: drop-shadow(0 0 8px rgb(67 231 255 / 55%));
}
.orbit-item:focus-visible {
    outline: 2px solid #43e7ff;
    outline-offset: 8px;
    border-radius: 8px;
}
.orbit-item:hover svg, .orbit-item:focus-visible svg {
    stroke: #43e7ff;
    border-color: #43e7ff;
}
#logo-menu {
    --logo-size: min(50vw, 360px);
    --orbit-radius: calc(var(--logo-size) / 2 + 40px);
    position: relative;
    width: var(--logo-size);
    height: var(--logo-size);
    margin: 48px auto 0px;
}
#logo-stage {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #050711;
    box-shadow: 0 0 0 1px rgb(100 210 255 / 15%),
                0 0 45px rgb(35 120 255 / 12%);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#logo-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from 0deg, #43e7ff, #3888ff, #9760ff, #f050d8, #b5ef68, #43e7ff);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: border-spin 24s linear infinite;
}
#logo-stage img, #logo-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}
#fox {
    text-align: center;
}
#fox video {
    width: min(80vw, 480px);
}