*{box-sizing:border-box}html,body{margin:0;background:#000;color:#eee;min-height:100%;font-family:system-ui,sans-serif}body{min-height:100svh;display:grid;place-items:center}.stage{--size:min(88vw,80svh,800px);--diameter:calc(var(--size)*.056);width:var(--size);height:var(--size);position:relative}.symbol-trigger{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer;transition:opacity 1.9s ease}.symbol-trigger img{display:block;width:100%;height:100%}.orb{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:max(44px,var(--diameter));height:max(44px,var(--diameter));color:#e8e8ed;text-decoration:none;visibility:hidden;pointer-events:none;-webkit-tap-highlight-color:transparent}.sphere,.pearl{position:relative;display:block;width:var(--diameter);height:var(--diameter);border-radius:50%}.sphere{background-image:url('/symbol-v2.png');background-size:1785.7143% 1785.7143%;background-position:var(--crop-x) var(--crop-y)}.color-sphere{position:absolute;inset:0;border-radius:50%;opacity:0;background:radial-gradient(circle at 36% 27%,#fff 0%,color-mix(in srgb,var(--color),white 65%) 9%,var(--color) 35%,color-mix(in srgb,var(--color),black 35%) 65%,#09090c 82%,var(--color) 96%);box-shadow:inset 0 0 2px #ffffff66,0 0 16px color-mix(in srgb,var(--color),transparent 78%);transition:opacity 1.6s ease}.center{left:50%;top:50%;opacity:0;transition:opacity .85s ease}.pearl{background:radial-gradient(circle at 33% 25%,#fff 0%,#f9fbff 15%,#efe5f1 32%,#cbdfe0 46%,#acafc2 66%,#4b485c 81%,#e1e6ee 95%);box-shadow:inset 0 0 3px #fff,0 0 18px #e3e5f329}.orb-label{position:absolute;top:calc(50% + var(--diameter)/2 + 10px);left:50%;transform:translateX(-50%);font-size:14px;white-space:nowrap;opacity:0;transition:opacity .6s ease;line-height:1.3}.center .orb-label{top:calc(50% + var(--diameter)/2 + 12px)}.center-shown .center{visibility:visible;opacity:1}.dissolving .symbol-trigger{opacity:0;pointer-events:none}.dissolving .outer{visibility:visible}.coloring .color-sphere{opacity:1}.ready .orb{visibility:visible;pointer-events:auto}.ready .orb-label{opacity:1}.ready .symbol-trigger{visibility:hidden}.orb:focus-visible{outline:1px solid #bbb;outline-offset:6px;border-radius:50%}.orb:hover .color-sphere,.orb:hover .pearl{filter:brightness(1.18)}.symbol-trigger:focus-visible{outline:1px solid #888;outline-offset:8px;border-radius:50%}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.outer:nth-child(3) .orb-label{left:auto;right:calc(50% - var(--diameter)/2);transform:none}.outer:nth-child(6) .orb-label{left:calc(50% - var(--diameter)/2);transform:none}