:root{color-scheme:dark;background:#000;font-family:system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0}
#universe{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;cursor:grab;background:radial-gradient(ellipse at 50% 48%,#1d2025 0%,#14161a 45%,#0d0f12 100%)}
#universe:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 32% 64%,#ffff0004,transparent 45%),radial-gradient(ellipse at 68% 28%,#c2d9ff06,transparent 40%)}
#universe:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse var(--orbit-zone-x,400px) var(--orbit-zone-y,300px) at 50% 50%,transparent 100%,#000 128%)}
#universe.dragging{cursor:grabbing}
#avatar{position:absolute;left:50%;top:50%;width:var(--avatar,200px);height:var(--avatar,200px);transform:translate(-50%,-50%);border-radius:50%;z-index:1000;background:#000;border:0;outline:0;box-shadow:0 0 55px #0008;transition:box-shadow .35s,background-color .35s}
#avatar:before{content:"";position:absolute;left:50%;top:50%;width:116%;height:116%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,#ffff0080 15%,#ffff0033 50%,transparent 72%);filter:blur(14px);opacity:0;transition:opacity .35s}
#avatar:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 30% 15%,#ffffff14,transparent 45%),radial-gradient(circle at 38% 30%,transparent 48%,#0007 100%);box-shadow:inset -12px -18px 30px #0006}
#avatar img{position:relative;display:block;transition:opacity .35s,transform .65s ease-in-out;width:100%;height:100%;border-radius:50%;object-fit:cover}
#avatar:hover,#avatar:focus-visible{box-shadow:0 0 55px #0009,0 0 26px #ffff0040,0 0 70px #ffff0028,0 0 110px #ffff0010}
#bubbles,#effects{position:absolute;inset:0;pointer-events:none}
.bubble{position:absolute;left:50%;top:50%;width:72px;height:72px;border-radius:50%;pointer-events:auto;will-change:transform;display:grid;place-items:center;text-decoration:none;border:0;outline:0;background:#ffffff05;isolation:isolate;cursor:pointer;box-shadow:0 7px 18px #0004;transition:box-shadow .25s,background-color .3s,opacity .3s}
.bubble img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;transition:opacity .3s}
.shell{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 28% 17%,#ffffff42 0%,#ffffff10 22%,transparent 46%),radial-gradient(circle at 40% 32%,transparent 45%,#05091240 100%);box-shadow:inset 3px 5px 9px #ffffff20,inset -5px -7px 12px #0307144a;transition:filter .25s,opacity .3s}
.shell:before{content:"";position:absolute;width:38%;height:17%;top:10%;left:16%;border-radius:50%;background:linear-gradient(180deg,#fffffff0,#ffffff22);transform:rotate(-34deg);filter:blur(.8px);opacity:.85}
.shell:after{content:"";position:absolute;width:16%;height:6%;right:16%;bottom:13%;border-radius:50%;background:#d8e9ff99;transform:rotate(-39deg);filter:blur(1.5px)}
.bubble:hover,.bubble:focus-visible{box-shadow:0 8px 24px #0005,0 0 22px #e4efff30}
.bubble:hover .shell,.bubble:focus-visible .shell{filter:brightness(1.25)}
.bubble.popped .shell,.bubble.popped img,.bubble.popped .domain-label{animation:pop .55s ease-out}
#effects{z-index:10000}
.ripple{position:absolute;border:1px solid #eaf3ffb3;border-radius:50%;width:50px;height:50px;animation:ripple .65s ease-out forwards;box-shadow:0 0 12px #d5e8ff35}
.spark{position:absolute;width:4px;height:4px;background:#ffffb3;border-radius:50%;animation:spark .6s ease-out forwards;box-shadow:0 0 6px #ffff0060}
@keyframes ripple{from{transform:translate(-50%,-50%) scale(.55);opacity:.8}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
@keyframes spark{from{transform:translate(0,0);opacity:.8}to{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes pop{0%{transform:scale(1)}25%{transform:scale(1.14);opacity:.5}48%{transform:scale(.8);opacity:.25}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.bubble.popped .shell,.bubble.popped img,.bubble.popped .domain-label{animation:none}.ripple,.spark{display:none}}

/* Search keeps nonmatches as truly opaque, black spheres. */
.bubble.muted{background:#000;box-shadow:none;cursor:default}
.bubble.muted img,.bubble.muted .domain-label,.bubble.muted .shell{opacity:0}
.bubble.matched{box-shadow:0 0 18px #ffff0038,0 0 38px #ffff001b,0 7px 18px #0004}
.bubble.matched:hover,.bubble.matched:focus-visible{box-shadow:0 0 22px #ffff0060,0 0 46px #ffff0026}
.bubble.bursting{pointer-events:none;opacity:0!important;transition:opacity .24s .08s;box-shadow:none;background:transparent}
.bubble.bursting img,.bubble.bursting .domain-label,.bubble.bursting .shell{animation:burst .34s ease-out forwards}
@keyframes burst{0%{transform:scale(1);opacity:1}30%{transform:scale(1.15);opacity:.85}100%{transform:scale(1.5);opacity:0}}
#search-drawer{position:fixed;z-index:20000;left:50%;bottom:var(--keyboard-offset,0px);width:min(400px,calc(100% - 24px));transform:translate(-50%,calc(100% - 30px - env(safe-area-inset-bottom,0px)));transition:transform .25s ease;cursor:default}
#search-drawer.open{transform:translate(-50%,0)}
#search-drawer button{font:inherit;color:#a4a7ae;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#search-toggle{display:flex;align-items:center;justify-content:center;gap:9px;margin:auto;width:74px;height:30px;background:#17191deb;border:1px solid #ffffff12;border-bottom:0;border-radius:13px 13px 0 0;box-shadow:0 -4px 18px #0004}
#search-toggle svg{width:16px;height:16px}
#search-drawer svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;flex-shrink:0}
.handle{display:block;width:14px;height:3px;border-radius:3px;background:#676b72;transition:background .2s}
#search-toggle:hover,#search-toggle:focus-visible{color:#ffffa3}
#search-toggle:hover .handle,#search-toggle:focus-visible .handle{background:#ffffa3}
#search-panel{position:relative;display:flex;align-items:center;gap:10px;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));background:#111317f5;border:1px solid #ffffff12;border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -10px 40px #0005;opacity:0;transition:opacity .2s;visibility:hidden}
.open #search-panel{opacity:1;visibility:visible}
.search-symbol{width:18px;height:18px;color:#8c909a;margin-left:4px}
#site-search{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#ededf0;font:400 16px/1.4 system-ui,sans-serif;padding:6px 0;caret-color:#ff0}
#site-search::placeholder{color:#797d87}
#site-search::-webkit-search-cancel-button{-webkit-appearance:none}
#search-close{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:0;border-radius:50%;background:#ffffff06}
#search-close svg{width:18px;height:18px}
#search-close:hover{color:#fff;background:#ffffff12}
#search-drawer button:focus-visible{outline:1px solid #ffff0070;outline-offset:3px}
#search-panel:focus-within{border-color:#ffff0026}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){#search-drawer,#search-panel,.bubble,.bubble img,.shell{transition:none}.bubble.bursting img,.bubble.bursting .domain-label,.bubble.bursting .shell{animation:none}}

/* A gently building glow each time the query enters the secret name. */
.larwri-active #avatar{background:#ff0;box-shadow:0 0 28px #ffff0080,0 0 75px #ffff004a,0 0 135px #ffff0026;transition:box-shadow 1.5s,background-color 1.5s}
.larwri-active #avatar:before{opacity:1;transition:opacity 1.5s}
.larwri-active #avatar:after{background:none;box-shadow:none}
.larwri-active #avatar img{opacity:.28;transition:opacity 1.5s}
.larwri-rumbling{animation:charge-rumble 1.5s linear both}
@keyframes charge-rumble{0%,100%{transform:translate(0,0)}8%{transform:translate(-1px,1px)}16%{transform:translate(1.8px,-1px)}24%{transform:translate(-2px,-1px)}32%{transform:translate(2px,1px)}40%{transform:translate(-1.5px,2px)}48%{transform:translate(2px,-1.5px)}56%{transform:translate(-2px,1px)}64%{transform:translate(1.5px,-1px)}72%{transform:translate(-1px,.8px)}80%{transform:translate(.8px,-.5px)}90%{transform:translate(-.3px,.3px)}}
@media(prefers-reduced-motion:reduce){.larwri-rumbling{animation:none}}

.bubble-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.domain-label{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#101319;color:#f4f4ed;font:600 var(--domain-font,13px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.025em;transition:opacity .3s}
#end-darkness{position:absolute;inset:0;z-index:900;background:#000;opacity:0;pointer-events:none;transition:opacity 10s linear}
.reverse-charging #avatar{animation:reverse-shake .12s linear infinite}
@keyframes reverse-shake{0%,100%{transform:translate(-50%,-50%) translate(0,0)}25%{transform:translate(-50%,-50%) translate(-3px,1px) rotate(-1deg)}50%{transform:translate(-50%,-50%) translate(2px,-2px) rotate(1deg)}75%{transform:translate(-50%,-50%) translate(-1px,2px)}}
.reverse-finished #end-darkness{opacity:1}
.reverse-finished #avatar img{transform:scaleX(-1);opacity:1}
.reverse-finished #avatar,.reverse-finished #avatar:hover,.reverse-finished #avatar:focus-visible{background:#000;box-shadow:none;transition:box-shadow 10s,background-color .35s}
.reverse-finished #avatar:before,.reverse-finished #avatar:after{opacity:0;transition:opacity 10s}
.reverse-ending #search-drawer{opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity 10s linear,visibility 0s 10s}
@media(prefers-reduced-motion:reduce){.reverse-charging #avatar{animation:none}.reverse-finished #avatar img{transition:none}}

/* Monograms stand in for favicons until cron.php has cached real icons. */
.monogram{color:var(--mark-color,#ffff5c);background:radial-gradient(circle at 50% 38%,#1b1f27 0%,#0e1116 72%);font:700 calc(var(--bubble-size,72px)*.36)/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.04em;text-shadow:0 0 calc(var(--bubble-size,72px)*.16) color-mix(in srgb,var(--mark-color,#ff0) 45%,transparent)}
.monogram[data-len="1"]{font-size:calc(var(--bubble-size,72px)*.44)}
.monogram[data-len="3"]{font-size:calc(var(--bubble-size,72px)*.27);letter-spacing:-.05em}

/* The platform name appears under a bubble on hover or keyboard focus. */
.bubble-name{position:absolute;left:50%;top:calc(100% + 7px);z-index:2;transform:translate(-50%,-3px) scale(var(--label-scale,1));transform-origin:50% 0;padding:4px 9px;border-radius:999px;background:#0b0d10ec;border:1px solid #ffffff1a;color:#f2f2ee;font:500 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;box-shadow:0 4px 14px #0007}
.bubble:hover .bubble-name,.bubble:focus-visible .bubble-name{opacity:1;transform:translate(-50%,0) scale(var(--label-scale,1))}
.bubble.muted .bubble-name,.bubble.bursting .bubble-name,.larwri-active .bubble-name{opacity:0}
.bubble:focus-visible{outline:2px solid #ffff00b0;outline-offset:3px}
.bubble.muted:focus-visible{outline:0}
#avatar:focus-visible{outline:2px solid #ffff00b0;outline-offset:5px}

noscript p{position:fixed;left:50%;bottom:48px;transform:translateX(-50%);z-index:30000;margin:0;padding:10px 16px;border-radius:12px;background:#111317;color:#d8d8dc;font:14px/1.4 system-ui,sans-serif;text-align:center;max-width:calc(100% - 32px)}
noscript a{color:#ffff8a}

/* The irwral ending keeps focus on the avatar for screen readers, but shows no ring:
   only the black avatar and its yellow eyes remain visible. */
.reverse-charging #avatar,.reverse-charging #avatar:focus-visible,.reverse-finished #avatar,.reverse-finished #avatar:focus-visible{outline:0}

/* 3D ball avatar (avatar3d.js). It replaces avatar.png when WebGL is available: flat
   #000 with #FF0 eyes, so the old shine overlay is switched off for it. */
#avatar canvas{position:relative;display:block;width:100%;height:100%;border-radius:50%;transition:opacity .35s,transform .65s ease-in-out}
#avatar.has-ball:after{display:none}
#avatar.has-ball img{display:none}
.larwri-active #avatar canvas{opacity:.28;transition:opacity 1.5s}
.reverse-finished #avatar canvas{transform:scaleX(-1);opacity:1}
@media(prefers-reduced-motion:reduce){.reverse-finished #avatar canvas{transition:none}}