:where(.face){vertical-align:middle;flex:none;display:inline-block;position:relative}.face{--face-ease:cubic-bezier(.16, 1, .3, 1);--face-spring:cubic-bezier(.34, 1.36, .64, 1);--face-ink:#1b1917;width:var(--face);height:var(--face);isolation:isolate;-webkit-user-select:none;user-select:none}.face svg{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}@property --pn-1{syntax:"<color>";inherits:true;initial-value:#f7d6e4}@property --pn-2{syntax:"<color>";inherits:true;initial-value:#e5dcff}@property --pn-3{syntax:"<color>";inherits:true;initial-value:#d4e7ff}@property --pn-4{syntax:"<color>";inherits:true;initial-value:#d5eef3}@property --pn-5{syntax:"<color>";inherits:true;initial-value:#fde1d2}.face--pearl{--tilt:0deg;--lean:1;--look-x:0px;--look-y:0px;--eye:1;--glance:1;--eye-tier:1;--arc-width:2.8px}.face--pearl[data-tier=s]{--eye-tier:1.2;--arc-width:3.6px}.fp-shadow{background:radial-gradient(closest-side,#543e2838,#543e2814 62%,#543e2800);border-radius:50%;width:58%;height:10%;position:absolute;top:84.5%;left:21%}.fp-rig,.fp-hop{transform-origin:50% 85%;position:absolute;inset:0}.fp-rig{transform:rotate(var(--tilt)) scale(var(--lean));transition:transform .4s var(--face-spring)}.fp-body{clip-path:circle(50%);isolation:isolate;--pn-1:#f7d6e4;--pn-2:#e5dcff;--pn-3:#d4e7ff;--pn-4:#d5eef3;--pn-5:#fde1d2;width:80%;height:80%;transition:--pn-1 .4s var(--face-ease), --pn-2 .4s var(--face-ease), --pn-3 .4s var(--face-ease), --pn-4 .4s var(--face-ease), --pn-5 .4s var(--face-ease);background:radial-gradient(circle at 36% 30%,#fff 0%,#fefcfa 22%,#f8f4f0 50%,#eee8e4 76%,#ded6d2 100%);border-radius:50%;position:absolute;top:5%;left:10%;overflow:hidden}.fp-body>span{border-radius:50%;position:absolute;inset:0}.fp-nacre{mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(circle at 38% 33%,#0000 30%,#000 74%);mask-image:radial-gradient(circle at 38% 33%,#0000 30%,#000 74%)}.fp-nacre>span{background:conic-gradient(from 30deg, var(--pn-1), var(--pn-2) 18%, var(--pn-3) 36%, var(--pn-4) 52%, var(--pn-5) 70%, var(--pn-1));filter:blur(calc(var(--face) * .045));animation:60s linear infinite fp-turn;position:absolute;inset:-22%}.fp-nacre>span+span{opacity:0;transition:opacity .4s var(--face-ease);background:conic-gradient(from 200deg,#d6caff,#c3e1ff 18%,#fff 34% 62%,#ffd8c0 78%,#ecf5bc 90%,#d6caff);animation-duration:4.8s;animation-play-state:paused}.fp-light{background:radial-gradient(44% 36% at 34% 26%,#fffffff2,#fff0 100%),radial-gradient(62% 24% at 50% 103%,#fff9,#fff0 100%)}.fp-body>.fp-glint{opacity:0;background:linear-gradient(104deg,#fff0 38%,#cec0ff66 44%,#fffc 50%,#ffd0ba66 56%,#fff0 62%);border-radius:0;inset:-30% -60%}.fp-edge{box-shadow:inset 0 0 0 1px #604a340d, inset calc(var(--face) * -.03) calc(var(--face) * -.045) calc(var(--face) * .09) #604a341a}.face--pearl[data-tier=s] .fp-edge{box-shadow:inset 0 0 0 1px #604a3424, inset calc(var(--face) * -.03) calc(var(--face) * -.045) calc(var(--face) * .09) #604a3429}.fp-look{transform-origin:50px 48px;transform:translate(calc(var(--gx,0) * var(--glance) * 6px + var(--look-x)), calc(var(--gy,0) * var(--glance) * 4px + var(--look-y))) scale(calc(1 - max(var(--gx,0), var(--gx,0) * -1) * var(--glance) * .1), 1);transition:transform .3s var(--face-ease)}.fp-open{transform:scale(calc(var(--eye) * var(--eye-tier)));transition:transform .32s var(--face-spring), scale .28s var(--face-spring) 70ms, opacity 40ms linear 60ms}.fp-blink{transform-origin:0 1.5px;animation:7.2s linear infinite fp-blink;animation-delay:var(--blink-at,0s)}.fp-dot{fill:var(--face-ink)}.fp-arc{fill:none;stroke:var(--face-ink);stroke-width:var(--arc-width);stroke-linecap:round;opacity:0;transform:translateY(1px) scale(calc(.9 * var(--eye-tier)), .3);transition:opacity 40ms linear 60ms,transform 90ms cubic-bezier(.4,0,1,1)}.face--pearl[data-mood=greeting]{--tilt:-9deg}.face--pearl[data-mood=listening]{--lean:1.05;--eye:1.14;--look-y:2.5px}.face--pearl[data-look][data-mood=listening]{--look-y:0px}.face--pearl[data-mood=working]{--tilt:4deg;--look-x:3.5px;--look-y:-6.5px;--glance:0}.face--pearl[data-mood=done]{--glance:0}.face--pearl[data-mood=asking]{--tilt:8deg;--eye:1.12;--look-y:-3px}.face--pearl[data-mood=asking] .fp-body{--pn-1:#fdd3c0;--pn-2:#ffe1c6;--pn-3:#f6efc4;--pn-4:#fde0c8;--pn-5:#fbd2c8}.face--pearl[data-mood=done] .fp-open,.face--pearl[data-mood=greeting] .fp-eye--r .fp-open{opacity:0;transition:transform .32s var(--face-spring), scale 90ms cubic-bezier(.4, 0, 1, 1), opacity 40ms linear 70ms;scale:1.1 .1}.face--pearl[data-mood=done] .fp-arc,.face--pearl[data-mood=greeting] .fp-eye--r .fp-arc{opacity:1;transform:scale(var(--eye-tier));transition:opacity 40ms linear 70ms, transform .32s var(--face-spring) 70ms}.face--pearl[data-mood=done] .fp-blink{animation-play-state:paused}.face--pearl[data-mood=working] .fp-nacre>span+span{opacity:1;animation-play-state:running}.face--pearl[data-mood=greeting] .fp-hop{animation:fp-hop .4s var(--face-ease) both}.face--pearl[data-mood=greeting] .fp-shadow{animation:fp-shadow .4s var(--face-ease) both}.face--pearl[data-mood=done] .fp-hop{animation:fp-bounce .4s var(--face-ease) both}.face--pearl[data-mood=done] .fp-glint{animation:.4s cubic-bezier(.4,0,.2,1) both fp-glint}.face--pearl[data-quiet][data-mood=done] .fp-hop,.face--pearl[data-quiet][data-mood=done] .fp-glint{animation:none}.face--pearl[data-still] *,.face--pearl[data-offscreen] *{animation-play-state:paused!important}:root:not([data-js]) .face--pearl *{animation:none!important}@keyframes fp-turn{to{transform:rotate(1turn)}}@keyframes fp-blink{0%,30.6%,33.4%,78.6%,81.1%,83.2%,to{transform:scaleY(1)}31.8%,79.8%,82.2%{transform:scaleY(.1)}}@keyframes fp-hop{0%{transform:none}16%{transform:scale(1.06,.93)}44%{transform:translateY(-10%)scale(.96,1.05)}70%{transform:translateY(0)scale(1.05,.94)}86%{transform:scale(.99,1.01)}to{transform:none}}@keyframes fp-shadow{44%{opacity:.55;transform:scale(.8)}}@keyframes fp-bounce{0%{transform:none}32%{transform:translateY(-5%)scale(.98,1.03)}62%{transform:translateY(0)scale(1.04,.96)}to{transform:none}}@keyframes fp-glint{0%{opacity:1;transform:translate(-60%)}to{opacity:1;transform:translate(60%)}}@media (prefers-reduced-motion:reduce){.face--pearl *{transition:none!important;animation:none!important}}