.hat-picker{position:absolute;left:50%;top:50%;width:0;height:0;z-index:50;pointer-events:none;transform-origin:0 0;--hat-ease: cubic-bezier(.22, 1, .36, 1);--hat-turn: 22deg}.hat-picker__bridge{position:absolute;overflow:visible;pointer-events:none}.hat-picker__bridge path{fill:transparent;pointer-events:all}.hat-picker__ring{position:absolute;left:0;top:0;width:0;height:0;animation:hat-ring-turn .36s var(--hat-ease) both}.hat-picker__slot{position:absolute;pointer-events:auto;animation:hat-slot-level .36s var(--hat-ease) both,hat-slot-in .2s ease-out calc(var(--hat-order, 0) * 18ms) both}.hat-picker__slot:hover,.hat-picker__slot:focus-within{z-index:2}.hat-picker__hat{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:50%;background:var(--card);color:var(--muted-foreground);box-shadow:0 6px 16px -4px #00000040,0 2px 4px -2px #0000002e,inset 0 1px #ffffff0d;cursor:pointer;transition:transform .16s ease-out,background-color .16s,border-color .16s,box-shadow .16s}.hat-picker__hat[aria-pressed=true]{border-color:var(--foreground);box-shadow:0 0 0 2px var(--foreground),0 0 0 6px color-mix(in srgb,var(--foreground) 14%,transparent),0 6px 16px -4px #00000040}.hat-picker__hat:hover,.hat-picker__hat:focus-visible{transform:scale(1.2);background:color-mix(in srgb,var(--foreground) 7%,var(--card));border-color:color-mix(in srgb,var(--foreground) 45%,transparent);box-shadow:0 12px 22px -6px #00000059,0 4px 8px -4px #00000038,inset 0 1px #ffffff0d}.hat-picker__hat[aria-pressed=true]:hover,.hat-picker__hat[aria-pressed=true]:focus-visible{border-color:var(--foreground);box-shadow:0 0 0 2px var(--foreground),0 0 0 6px color-mix(in srgb,var(--foreground) 14%,transparent),0 12px 22px -6px #00000059}.hat-picker__hat:active{transform:scale(1.08)}.hat-picker__hat:focus-visible,.hat-picker__customize:focus-visible{outline:2px solid var(--primary);outline-offset:4px}.hat-picker__art{display:flex;align-items:center;justify-content:center;width:72%;height:72%}.hat-picker__name{position:absolute;z-index:3;padding:3px 8px;border-radius:8px;background:color-mix(in srgb,var(--foreground) 90%,transparent);color:var(--background);font-size:.68rem;line-height:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap;pointer-events:none;animation:hat-name-in .12s ease-out both}.hat-picker__footer{position:absolute;left:0;transform:translate(-50%);white-space:nowrap;animation:hat-slot-in .2s ease-out .16s both}.hat-picker__customize{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:999px;background:var(--card);color:var(--foreground);font-size:11px;box-shadow:0 6px 16px -4px #00000040;pointer-events:auto;cursor:pointer;transition:background-color .16s}.hat-picker__customize:hover{background:color-mix(in srgb,var(--foreground) 7%,var(--card))}@keyframes hat-ring-turn{0%{rotate:calc(var(--hat-turn) * -1)}to{rotate:0deg}}@keyframes hat-slot-level{0%{rotate:var(--hat-turn)}to{rotate:0deg}}@keyframes hat-slot-in{0%{opacity:0;scale:.7}to{opacity:1;scale:1}}@keyframes hat-name-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.hat-picker__ring,.hat-picker__slot,.hat-picker__footer,.hat-picker__name{animation:none}.hat-picker__hat{transition:none}.hat-picker__hat:hover,.hat-picker__hat:focus-visible,.hat-picker__hat:active{transform:none}}