:root{color-scheme:dark;background:#102831}
*{box-sizing:border-box}
body{margin:0;background:#102831}
.night{min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at 50% 40%,#17353e 0%,#102831 55%,#0d242d 100%)}
.visitor-ip{position:absolute;z-index:1;pointer-events:none;top:calc(env(safe-area-inset-top) + clamp(24px,5svh,48px));left:50%;transform:translateX(-50%);display:flex;align-items:baseline;justify-content:center;gap:12px;width:max-content;max-width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 48px);margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;text-align:center}
.visitor-ip-family{flex:none;color:#8ff0d8;font-size:13px;font-weight:500}
.visitor-ip-address{pointer-events:auto;min-width:0;padding:0;border:0;border-radius:3px;background:transparent;appearance:none;color:#d8e9e7;font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:clamp(16px,2.4vw,18px);font-variant-numeric:tabular-nums;line-height:inherit;overflow-wrap:anywhere;cursor:text;-webkit-user-select:text;user-select:text}
.visitor-ip-address[data-copy-ready]{cursor:pointer}
.visitor-ip-address:focus-visible{outline:2px solid #edd8a7;outline-offset:4px}
.visitor-ip-feedback{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:100%;color:#b7d6d4;font-size:12px;line-height:1.5;pointer-events:none;user-select:none}
@media(hover:hover){.visitor-ip-address[data-copy-ready]:hover{text-decoration:underline;text-decoration-color:#8ff0d8;text-underline-offset:4px}}
.world{--pal-size:clamp(48px,8vw,56px);--tool-size:clamp(48px,11vmin,72px);--tool-gap:clamp(12px,3vmin,24px);position:relative;width:min(88vw,640px);aspect-ratio:1;max-height:90svh}
.sky{display:block;width:100%;height:100%}
.tools{position:absolute;left:50%;top:calc(60% - var(--pal-size) - var(--tool-size) - 24px);display:grid;grid-template-columns:repeat(3,var(--tool-size));gap:var(--tool-gap);transform:translateX(-50%)}
.portal{position:relative;width:var(--tool-size);height:var(--tool-size);display:block;border-radius:16px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:filter .2s,background .2s}
.portal::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(ellipse,#a2e0ce14,transparent 68%);pointer-events:none}
.portal svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 8px #b7e9d826);transition:filter .2s}
.portal:focus-visible{outline:2px solid #edd8a7;outline-offset:4px}
.portal:active{background:#9ad1c212;filter:brightness(1.2)}
.orbit{opacity:.35}
.island{animation:island 7s ease-in-out infinite;transform-origin:320px 400px}
.moon{filter:drop-shadow(0 0 12px #edd8a71a)}
@keyframes island{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(hover:hover){.portal:hover{filter:brightness(1.14)}.portal:hover svg{filter:drop-shadow(0 0 18px #b7e9d85a)}}
@media(max-height:500px) and (orientation:landscape){.world{width:min(85vh,500px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.pal-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pal{position:absolute;width:var(--pal-size);height:var(--pal-size);padding:0;border:0;border-radius:12px;background:transparent;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#8ff0d8}
.pal:disabled{cursor:default}.pal:focus-visible{outline:2px solid #edd8a7;outline-offset:4px}.pal svg{display:block;pointer-events:none;overflow:visible}
.pal-robo{left:calc(50% - var(--pal-size)/2);bottom:40%}.robo-art{width:80%;align-self:end;margin-bottom:6px;filter:drop-shadow(0 3px 6px #8ff0d81a)}
.pal-ufo{left:max(74%,calc(50% + var(--tool-size)*1.5 + var(--tool-gap) + 8px));top:14%}.ufo-art{width:60%;filter:drop-shadow(0 4px 8px #8ff0d81f)}
.pal-heart{position:absolute;top:-22px;width:20px;height:17px;fill:#ff9fba;opacity:0}.pal-signal{position:absolute;bottom:-16px;width:32px;height:24px;stroke:#8ff0d8;stroke-width:1.5;stroke-linecap:round;fill:none;opacity:0}
.pal-lids{opacity:0}.pal-happy{display:none}.pal[data-reaction=true] .pal-happy{display:block}.pal[data-reaction=true] .pal-gaze{visibility:hidden}.world .pal[data-reaction=true] .pal-lids{animation:none;opacity:0}
.world[data-awake=true] .pal-lids{animation:pal-blink 6s step-end infinite}.world[data-awake=true] .pal-antenna{animation:pal-light 3s step-end infinite}.world[data-awake=true] .ufo-art{animation:pal-hover 6s ease-in-out infinite}
.pal-robo[data-reaction=true] .robo-art{animation:pal-hop .65s ease-out}.pal[data-reaction=true] .pal-heart,.pal[data-reaction=true] .pal-signal{opacity:1}.pal-ufo[data-reaction=true] .ufo-art{animation:pal-flight 1.1s ease-in-out}
@keyframes pal-blink{0%,94%,98%,100%{opacity:0}95%,97%{opacity:1}}@keyframes pal-light{0%,100%{fill:#ff4d6d}50%{fill:#c6f432}}@keyframes pal-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pal-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px) rotate(-5deg)}65%{transform:translateY(-4px) rotate(4deg)}}@keyframes pal-flight{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(14px,-12px) rotate(-12deg)}70%{transform:translate(-3px,-4px) rotate(6deg)}}
@media(hover:hover){.pal:enabled:hover .pal-art{filter:drop-shadow(0 0 8px #8ff0d855)}}
