:root{color-scheme:light;--shadow-color: 220 3% 15%;--shadow-strength: 1%;--surface-2: #e9ecef;--control-border: #dee2e6}:root{--lerp-0: 1;--lerp-1: .5625;--lerp-2: .25;--lerp-3: .0625;--lerp-4: 0}*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;align-content:center;min-height:100vh;gap:1.75rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif,system-ui;position:relative;background:#ffd43b}[behavior=button]{anchor-name:--button;padding:.5rem;font-size:1.1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;width:5rem;height:5rem;aspect-ratio:1;border-radius:50%;display:flex;place-items:center;border:1px solid var(--control-border);box-shadow:0 -1px 2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));scale:var(--scale, 1);transition:scale .2s cubic-bezier(.5,1,.75,1.25)}[behavior=button]:is(:hover,:focus-visible,:focus){--scale: 1.1}[behavior=button]:before{content:"";position:absolute;inset:0;background:#abb3ba59;border-radius:50%;z-index:-1;scale:var(--active, 0);transition:scale .1s}[behavior=button][data-active=true]:before{--active: 1;transition:scale .4s .1s}[behavior=button][data-active=true]{--scale: .9}#reaction-listbox [role=option] :is(picture,img){scale:calc(1 + (var(--lerp, 0) * .75));transition:scale .2s}[data-selected=false] [data-placeholder],[data-selected=true] .empty{display:none}:where(span,[role=option]){font-size:var(--font-size, 1rem);font-weight:var(--font-weight, 400)}:where([role=option],[data-placeholder]){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;margin:0;background:transparent;font:inherit;color:inherit;cursor:pointer;--hovered: 0;width:5rem;display:grid;grid-template:1fr / 1fr;gap:1.25rem;padding:.5rem;aspect-ratio:1;place-items:center}:where([role=option],[data-placeholder]) :where(img,picture){grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:1;-o-object-fit:contain;object-fit:contain}:where([role=option],[data-placeholder]) picture>img{width:100%;height:100%;display:block}:where([role=option],[data-placeholder])>img{opacity:calc(1 - var(--hovered))}:where([role=option],[data-placeholder]):is(:hover,.active){--hovered: 1}[role=option]:first-of-type{border-radius:50% 0 0 50%}[role=option]:last-of-type{border-radius:0 50% 50% 0}.empty{padding:.5rem;width:5rem;aspect-ratio:1;display:grid;place-items:center}.empty svg{width:100%;height:auto;aspect-ratio:1}[data-selected-value=heart] [behavior=button] [data-placeholder]{translate:0 2%}.empty svg{fill:none;stroke-width:10px;stroke:#adb5bd;scale:.9;translate:0 2%}:where([role=option],[data-placeholder]) picture{opacity:var(--hovered)}#reaction-listbox{border:1px solid var(--control-border);border-radius:5rem;box-shadow:0 -1px 3px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));transform-origin:50% 0;overflow:visible;position:fixed;inset:auto;margin:0;top:anchor(--button bottom);left:anchor(--button center);width:-moz-max-content;width:max-content;min-height:88px;transform:translate(-50%) translateY(calc(var(--open, 0) * 15%)) scale(var(--open, 0))}[role=option]:is(:hover,.active){background:var(--surface-2)}#reaction-listbox:popover-open{display:flex;transition:transform .2s;--open: 1}@starting-style{#reaction-listbox:popover-open{--open: 0}}:is([role=option]:hover,[role=option].active){--lerp: var(--lerp-0);z-index:5}[role=option]:has(+:is([role=option]:hover,[role=option].active)),:is([role=option]:hover,[role=option].active)+[role=option]{--lerp: var(--lerp-1);z-index:4}[role=option]:has(+[role=option]+:is([role=option]:hover,[role=option].active)),:is([role=option]:hover,[role=option].active)+[role=option]+[role=option]{--lerp: var(--lerp-2);z-index:3}[role=option]:has(+[role=option]+[role=option]+:is([role=option]:hover,[role=option].active)),:is([role=option]:hover,[role=option].active)+[role=option]+[role=option]+[role=option]{--lerp: var(--lerp-3);z-index:2}[role=option]:has(+[role=option]+[role=option]+[role=option]+:is([role=option]:hover,[role=option].active)),:is([role=option]:hover,[role=option].active)+[role=option]+[role=option]+[role=option]+[role=option]{--lerp: var(--lerp-4);z-index:1}