.of-character{width:min(100%,230px);color:var(--wine);text-align:center;margin:0 auto}.of-character-touch{cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:650px;background:0 0;border:0;border-radius:45%;width:100%;padding:0;display:block}.of-character-touch:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}.of-character-body{transform-origin:50% 82%;will-change:transform;transition:filter .4s;animation:5.4s ease-in-out infinite of-breathe;display:block;position:relative}.of-character-base{filter:drop-shadow(0 14px 12px #30382818);border-radius:0;width:100%;height:auto;display:block}.of-character-features{transform:translate(var(--look-x),var(--look-y));transition:transform .22s ease-out;position:absolute;inset:0}.of-eye,.of-smile{transform-origin:50%;display:block;position:absolute}.of-eye{width:10%;height:12.8%;animation:6.3s infinite of-blink;top:39%}.of-eye.left{left:37%}.of-eye.right{animation-delay:35ms;left:53%}.of-eye svg,.of-smile svg{width:100%;height:100%;display:block}.of-smile{width:11%;height:5.13%;transition:transform .4s;top:54%;left:44.5%}.of-character-caption{font:14px/1.5 var(--font-ui);min-height:21px;color:var(--muted)!important;margin:8px 0 10px!important}.of-character-signature{font:13px/1.5 var(--font-ui);letter-spacing:.24em;color:var(--gold-deep);margin-top:4px;display:block}.of-motion-control{border:1px solid var(--line);font:13px/1.5 var(--font-ui);color:var(--muted);cursor:pointer;background:0 0;border-radius:24px;justify-content:center;align-items:center;gap:8px;padding:8px 13px;transition:background .2s,color .2s;display:inline-flex}.of-motion-control:hover{background:var(--white);color:var(--wine)}.of-motion-control:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}.of-character.mood-listening .of-character-body{animation:3s ease-in-out infinite of-listen}.of-character.mood-thinking .of-character-body{animation:2.8s ease-in-out infinite of-think}.of-character.mood-thinking .of-character-features{transform:translate(3px,-3px)}.of-character.mood-thinking .of-smile{transform:scaleX(.8)}.of-character.mood-reply .of-character-body{animation:1.1s ease-in-out 2 of-greet,5.4s ease-in-out 2.2s infinite of-breathe}.of-character.mood-reply .of-smile{transform:scale(1.12)}.of-character.is-winking .of-eye.right{animation:1.3s ease-in-out of-wink}.of-character.is-winking .of-character-body{animation:1.1s ease-in-out of-greet}.of-character.is-still .of-character-body,.of-character.is-still .of-eye,.of-character.is-still .of-character-features,.of-character.is-still .of-smile{will-change:auto;transition:none;animation:none;transform:none}@keyframes of-blink{0%,43%,47%,76%,80%,to{transform:scaleY(1)}45%,78%{transform:scaleY(.08)}}@keyframes of-wink{0%,25%,70%,to{transform:scaleY(1)}35%,60%{transform:scaleY(.06)}}@keyframes of-breathe{0%,to{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-5px) rotate(var(--tilt,0deg)) scale(1.012)}}@keyframes of-listen{0%,to{transform:rotate(-3deg)}50%{transform:rotate(1deg)translateY(-3px)}}@keyframes of-think{0%,to{transform:rotate(-4deg)translateY(-2px)}50%{transform:rotate(4deg)translateY(-6px)}}@keyframes of-greet{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)translateY(-6px)}65%{transform:rotate(4deg)translateY(-3px)}}@media (max-width:760px){.of-intro{grid-template-columns:110px 1fr}.of-character{grid-row:1/4;width:110px;margin:0}.of-character-caption{min-height:36px;font-size:12px!important}.of-motion-control{padding:4px;font-size:12px}.of-character-touch{min-height:110px}}@media (prefers-reduced-motion:reduce){.of-character *{transition:none!important;animation:none!important;transform:none!important}}