:root { --ratio: 2.4; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #081b2a; }
body { display: grid; place-items: center; font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.stage { position: relative; width: min(100vw, calc(100vh * var(--ratio))); height: min(100vh, calc(100vw / var(--ratio))); aspect-ratio: 12 / 5; overflow: hidden; user-select: none; }
.artwork { position: absolute; inset: 0; pointer-events: none; }
.artwork img { width: 100%; height: 100%; display: block; }
.logo-layers { position: absolute; inset: 0; pointer-events: none; }
.logo-layers img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo-color { opacity: 0; }
.logo-color.is-revealed { animation: logo-reveal 3s cubic-bezier(.22,.8,.32,1) both; }
.logo-color.is-complete { opacity: 1; animation: none; }
@keyframes logo-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hotspots { position: absolute; inset: 0; }
.hotspot, .compose { position: absolute; border: 0; padding: 0; cursor: pointer; background: transparent; }
.hotspot { width: 4.4%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.hotspot::after { content:""; position:absolute; inset:0; border-radius:50%; }
.hotspot:focus-visible, .compose:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.color-white { left: 32.716957%; top: 59.373457%; }.color-purple { left: 37.749882%; top: 65.801171%; }.color-orange { left: 47.815734%; top: 66.083398%; }.color-red { left: 52.851599%; top: 66.083398%; }.color-blue { left: 42.782808%; top: 72.228886%; }.color-gray { left: 57.884525%; top: 72.228886%; }.color-pink { left: 62.917451%; top: 65.801171%; }.color-green { left: 67.950376%; top: 59.084174%; }
.hotspot.selected { filter: brightness(1.12) drop-shadow(0 0 8px rgba(255,255,255,.85)); }
.compose { left: 39.3%; top: 78%; width: 21.4%; height: 11.6%; border-radius: 999px; color: transparent; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .logo-color.is-revealed, .logo-color.is-complete { animation: none; opacity: 1; } }