:root {
    color-scheme: dark;
    background: #010711;
}

.legal-links { position: absolute; z-index: 2; bottom: max(13px, env(safe-area-inset-bottom)); left: 21px; right: max(21px, env(safe-area-inset-right)); display: flex; justify-content: flex-end; gap: 21px; font: 11px/21px -apple-system, BlinkMacSystemFont, sans-serif; color: #9aafc2; }
.legal-links a { color: inherit; text-decoration: none; padding: 8px 0; }
.legal-links a:hover { color: #e5edf5; }
.legal-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

* { box-sizing: border-box; }
html, body { margin: 0; min-block-size: 100%; }
body { position: relative; }

.scene {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    block-size: var(--scene-height);
    background: #010711;
    overflow: hidden;
    isolation: isolate;
    touch-action: pinch-zoom;
}

.scene:focus-visible { outline: 1px solid #7194ae; outline-offset: -6px; }
.scene[data-over-globe="true"] { cursor: grab; }
.scene[data-dragging="true"] { cursor: grabbing; }
.scene[data-motion="reduced"] { cursor: default; }

.scene__surface {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    pointer-events: none;
}

.scene--rendered .scene__surface { opacity: 1; }

.scene {
    --phi: 1.618033988749895;
    --icon-min: 34px;
    --target-min: 55px;
    --scene-height: max(400px, 100svh);
    --globe-size: calc(min(100vw, var(--scene-height)) / var(--phi));
    --icon-size: max(var(--icon-min), calc(var(--globe-size) / var(--phi) / var(--phi) / var(--phi) / var(--phi) / var(--phi)));
    --bead-size: calc(var(--icon-size) * var(--phi));
    --icon-gap: calc(var(--bead-size) / var(--phi));
    --icon-hit: max(var(--target-min), var(--bead-size));
    --icon-corner: calc(100% / var(--phi) / var(--phi) / var(--phi));
    --orbit-radius: calc(var(--globe-size) / 2 + var(--icon-hit) / 2 + var(--icon-gap));
    --orbit-limit-x: calc((50vw - var(--icon-hit) / 2 - 21px) / 0.8090169944);
    --orbit-x: min(var(--orbit-radius), var(--orbit-limit-x));
    --orbit-y: min(var(--orbit-radius), calc((var(--scene-height) / 2 - var(--icon-hit) / 2 - 68px) / 0.9510565163));
}

.scene__fallback { display: none; position: absolute; width: var(--globe-size); height: var(--globe-size); object-fit: cover; border-radius: 50%; pointer-events: none; box-shadow: 0 0 34px #c8964b24; }
.scene[data-renderer="unavailable"] .scene__fallback { display: block; }
.profile-links { position: absolute; z-index: 1; inset: 0; pointer-events: none; visibility: hidden; }
.profile-links .app-link { position: absolute; left: calc(50% + var(--planet-x) * var(--orbit-x)); top: calc(50% - var(--planet-y) * var(--orbit-y)); transform: translate(-50%, -50%); pointer-events: auto; }
.profile-links--social .app-link { top: calc(50% + var(--planet-y) * var(--orbit-y)); }
.app-link:nth-child(1) { --planet-x: -0.8090169944; --planet-y: 0.5877852523; }
.app-link:nth-child(2) { --planet-x: -0.3090169944; --planet-y: 0.9510565163; }
.app-link:nth-child(3) { --planet-x: 0.3090169944; --planet-y: 0.9510565163; }
.app-link:nth-child(4) { --planet-x: 0.8090169944; --planet-y: 0.5877852523; }
@media (orientation: landscape) { .scene { --orbit-x: min(calc(var(--globe-size) * var(--phi)), var(--orbit-limit-x)); } }
@media (max-height: 610px) and (min-aspect-ratio: 4/5) {
    .scene {
        --scene-height: max(320px, 100svh);
        --orbit-y: min(var(--orbit-radius), calc((var(--scene-height) / 2 - var(--icon-hit) / 2 - 21px) / 0.9510565163));
    }
}
@media (max-width: 479px) and (max-height: 610px) and (min-aspect-ratio: 4/5) {
    .scene { --scene-height: max(377px, 100svh); }
    .legal-links { position: relative; inset: auto; padding: 5px max(21px, env(safe-area-inset-right)) max(13px, env(safe-area-inset-bottom)) 21px; }
}
.scene--rendered .profile-links, .scene[data-renderer="unavailable"] .profile-links { visibility: visible; }
.app-link {
    display: grid;
    place-items: center;
    width: var(--icon-hit);
    height: var(--icon-hit);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}
.glass-bead {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--bead-size);
    height: var(--bead-size);
    isolation: isolate;
}
.app-icon {
    position: relative;
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: hidden;
    border-radius: var(--icon-corner);
}
.scene--rendered .app-icon { opacity: 0; }
.glass-bead:is([data-profile="x"], [data-profile="deezer"]) .app-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: max(0.6px, calc(var(--icon-size) / 55));
    border-radius: inherit;
    corner-shape: inherit;
    background: linear-gradient(135deg, #b3b3b3, #58585824 32%, #0000 45%, #8a8a8acc);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
@supports (corner-shape: squircle) {
    .app-icon {
        border-radius: calc(100% / var(--phi) / var(--phi));
        corner-shape: squircle;
    }
}
.app-glyph {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--icon-size);
    height: var(--icon-size);
    mask-mode: alpha;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    pointer-events: none;
}
.scene--rendered .app-glyph { display: block; }
.app-icon img, .app-glyph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-link:focus-visible { outline: 2px solid #91b8d4; outline-offset: 3px; }