/* Otto: a small desk companion, built from CSS so it remains crisp and light. */
.otto{--shell:#dce6c7;position:relative;width:150px;height:195px;isolation:isolate;filter:drop-shadow(0 15px 12px #101a1635);animation:otto-breathe 4s ease-in-out infinite;pointer-events:none}
.otto-aerial{position:absolute;left:74px;top:3px;width:4px;height:22px;background:linear-gradient(90deg,#657557,#afbd9c);z-index:0;transform:rotate(9deg);transform-origin:bottom}.otto-aerial i{display:block;width:12px;height:12px;background:#d4fa90;border-radius:50%;position:absolute;left:-4px;top:-4px;box-shadow:0 0 12px #c5f47680,inset 0 2px 2px #fff9}
.otto-head{position:absolute;left:13px;top:23px;width:124px;height:86px;border:1px solid #f4fae6;border-radius:32px 32px 26px 26px;background:linear-gradient(135deg,#f5f8e9 4%,#d6e0bd 45%,#a5b58d);box-shadow:inset -5px -6px 9px #75856033,inset 2px 2px 2px #fff,0 6px 0 #84966c;z-index:4;transform:rotate(-5deg)}
.otto-face{position:absolute;inset:16px 13px 14px;background:linear-gradient(140deg,#172f25,#263d2c);border-radius:19px 19px 17px 17px;box-shadow:inset 0 3px 8px #0007,0 1px 0 #fff;display:flex;align-items:center;justify-content:center;gap:22px;overflow:hidden}.otto-face:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffff0d,transparent 45%)}
.otto-eye{height:18px;width:10px;background:#d6ff9f;border-radius:6px;box-shadow:0 0 9px #c5f47680;animation:otto-blink 7s infinite}.otto-mouth{position:absolute;width:13px;height:5px;border-bottom:2px solid #bdda92;bottom:10px;border-radius:0 0 10px 10px}.otto-cheek{position:absolute;width:8px;height:3px;background:#d3927380;border-radius:2px;bottom:23px;z-index:5}.cheek-left{left:21px}.cheek-right{right:21px}
.otto-ear{position:absolute;top:54px;width:14px;height:26px;border-radius:8px;background:linear-gradient(90deg,#839773,#c1d1ab);z-index:2}.ear-left{left:5px;transform:rotate(-5deg)}.ear-right{right:5px;transform:rotate(-5deg)}
.otto-body{position:absolute;left:35px;top:111px;width:81px;height:59px;border-radius:18px 18px 22px 22px;background:linear-gradient(130deg,#f0f5df,#cedbb5 55%,#95aa7c);box-shadow:inset -4px -4px 8px #6e875632,0 4px 0 #758d5a;border:1px solid #e7f1d3;z-index:3;text-align:center;padding-top:12px}.otto-body>span{font:8px ui-monospace,monospace;letter-spacing:3px;color:#526642}.otto-body>i{display:block;margin:7px auto 0;width:7px;height:7px;border-radius:50%;background:#567f34;box-shadow:0 0 0 3px #93ad7460}.otto-vents{font:13px monospace;color:#5d7644;position:absolute;bottom:0;left:33px;letter-spacing:1px}
.otto-arm{position:absolute;top:119px;width:19px;height:45px;border-radius:12px;background:linear-gradient(90deg,#879d70,#d6e4bb);z-index:2;transform-origin:top}.arm-left{left:16px;transform:rotate(16deg)}.arm-right{right:15px;transform:rotate(-17deg)}.otto-foot{position:absolute;top:170px;width:31px;height:15px;background:linear-gradient(#d3dfbe,#849d70);border-radius:8px 8px 5px 5px;box-shadow:0 3px 0 #586e4b}.foot-left{left:37px;transform:rotate(-9deg)}.foot-right{right:32px;transform:rotate(9deg)}.otto-shadow{position:absolute;bottom:0;left:20px;width:112px;height:12px;border-radius:50%;background:#16301940;filter:blur(6px);z-index:-1}
.otto-sleep .otto-eye{height:3px;animation:none;transform:rotate(-7deg)}.otto-sleep .otto-head{transform:rotate(-12deg) translateY(5px)}.otto-sleep .otto-aerial i{box-shadow:none;background:#9aa983}.otto-sleep .otto-mouth{height:5px;width:5px;border:1px solid #c5f476;border-radius:50%}.otto-busy .otto-aerial i{animation:otto-signal .8s ease-in-out infinite}.otto-busy .arm-right{animation:otto-wave .7s ease-in-out infinite alternate}.otto-happy .otto-eye{height:10px;background:transparent;border-top:4px solid #d6ff9f;border-radius:50%;box-shadow:none;animation:none}.otto-happy .arm-right{transform:rotate(-135deg)}.otto-happy .otto-mouth{height:7px;width:16px;background:#bdda92;border-radius:3px 3px 10px 10px}.otto-small{transform:scale(.43);transform-origin:top left;animation:none}
@keyframes otto-breathe{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes otto-blink{0%,44%,48%,100%{scale:1 1}46%{scale:1 .12}}
@keyframes otto-wave{from{transform:rotate(-35deg)}to{transform:rotate(-75deg)}}
@keyframes otto-signal{50%{box-shadow:0 0 20px #c5f476;background:#e8ffc3}}