:root{color-scheme:dark;background:#080c10;color:#9b9e99;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}main{position:relative;background:radial-gradient(ellipse at 50% 46%,#18202750,transparent 62%),#080c10}
#globe{position:absolute;inset:0;touch-action:none;cursor:grab;outline:none}#globe.dragging{cursor:grabbing}#globe canvas{display:block;width:100%;height:100%}#globe:focus-visible{box-shadow:inset 0 0 0 1px #b9a07860}
.signature{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:max(36px,env(safe-area-inset-left));font-size:10px;letter-spacing:1.3px;font-weight:400;color:#697372;opacity:.8;pointer-events:none;user-select:none}
#play{position:absolute;right:22px;bottom:17px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#68726d;cursor:pointer;opacity:.45;transition:opacity .3s,background .3s}#play:hover,#play:focus-visible{opacity:1;background:#bda7740b}#play:focus-visible{outline:1px solid #bda77470;outline-offset:1px}#play svg{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}#play .play-symbol{display:none;fill:currentColor;stroke:none}body.paused #play .play-symbol{display:block}body.paused #play .pause-symbol{display:none}
.loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.loading span{width:5px;height:5px;border-radius:50%;background:#d7b477;box-shadow:0 0 22px 5px #d7b47722;animation:breathe 2s ease-in-out infinite}.loading[hidden]{display:none}@keyframes breathe{50%{opacity:.25}}
.fallback{position:absolute;left:20%;right:20%;top:48%;text-align:center;color:#959e9a;font-size:13px;line-height:1.7;pointer-events:none}.fallback[hidden]{display:none}
@media(max-width:650px){.signature{font-size:8px;letter-spacing:1px;bottom:max(24px,env(safe-area-inset-bottom));left:24px}#play{right:12px;bottom:7px}.fallback{left:12%;right:12%}}
#colors{position:absolute;right:max(22px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;padding:7px 2px;border-radius:28px;background:#080c104d;backdrop-filter:blur(7px)}
.color-toggle{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation}
.color-toggle span{width:20px;height:20px;border-radius:50%;background:var(--swatch);opacity:.32;transform:scale(.78);transition:opacity .2s,transform .2s,box-shadow .2s}
.color-toggle:after{content:"";position:absolute;inset:7px;border:1px solid var(--color);border-radius:50%;opacity:.12;transition:opacity .2s}
.color-toggle[aria-pressed="true"] span{opacity:.95;transform:scale(1);box-shadow:0 0 12px color-mix(in srgb,var(--color) 24%,transparent)}
.color-toggle[aria-pressed="true"]:after{opacity:.65}
.color-toggle:hover span{opacity:1}.color-toggle:focus-visible{outline:1px solid #e5e4da;outline-offset:0}
@media(max-width:650px){#colors{right:max(7px,env(safe-area-inset-right));gap:1px}}
@media(max-height:420px){#colors{gap:0;padding:2px}.color-toggle{height:40px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}