.portrait{width:88px;height:88px;padding:var(--space-1);flex:none;display:block;position:relative;overflow:hidden}.portrait__face{width:100%;height:100%;display:block}.portrait--guide .portrait__talk,.portrait--guide .portrait__blink{position:absolute;inset:0}.portrait__talk{visibility:hidden}.portrait--talking .portrait__talk{animation:.24s step-end infinite portrait-talk}.portrait--talking .portrait__mouth{animation:.24s step-end infinite portrait-talk-off}.dialog--face .portrait:not(.portrait--talking){animation:1.6s steps(2,end) infinite portrait-float}.portrait__blink{visibility:hidden}.portrait--guide:not(.portrait--talking) .portrait__blink{animation:3.2s step-end infinite portrait-blink}@keyframes portrait-talk{50%{visibility:visible}}@keyframes portrait-talk-off{50%{visibility:hidden}}@keyframes portrait-float{50%{translate:0 -3px}}@keyframes portrait-blink{92%{visibility:visible}}@media (width<=720px){.portrait{width:56px;height:56px;padding:2px}}@media (prefers-reduced-motion:reduce){.dialog--face .portrait,.portrait--guide .portrait__blink,.portrait--talking .portrait__talk,.portrait--talking .portrait__mouth{animation:none}}.keycap{vertical-align:middle;background:var(--color-gray-300);width:20px;height:20px;box-shadow:inset -2px -2px 0 var(--color-gray-500), inset 2px 2px 0 var(--color-gray-100);justify-content:center;align-items:center;display:inline-flex}.keycap svg{width:10px;height:10px;fill:var(--color-black)}