.character{width:100%;height:100%;overflow:visible}.body{transform-origin:70px 110px;animation:4s ease-in-out infinite float}.shadow{transform-origin:70px 130px;animation:4s ease-in-out infinite shadow}.head{transform-origin:70px 85px;animation:8s ease-in-out infinite head}.leftWing{transform-origin:45px 78px;animation:3.2s ease-in-out infinite leftWing}.rightWing{transform-origin:95px 78px;animation:3.2s ease-in-out infinite rightWing}.eyes{transform-origin:70px 62px;animation:5.6s linear infinite blink}.pupils{animation:9s ease-in-out infinite look}.hand{transform-origin:94px 101px;animation:7s ease-in-out infinite wave}.gem{animation:3s ease-in-out infinite glow}.sparkles{transform-origin:70px 60px;animation:1.8s ease-in-out infinite sparkle}.snooze{animation:2.5s ease-out infinite snooze}.thoughts circle{animation:1.4s ease-in-out infinite thought}.thoughts circle:nth-child(2){animation-delay:.2s}.thoughts circle:nth-child(3){animation-delay:.4s}.character[data-expression=curious] .head{animation:3s ease-in-out infinite curious}.character[data-expression=thinking] .hand{animation:none}.character[data-expression=thinking] .head{animation:2.4s ease-in-out infinite nod}.character[data-expression=sleepy] .body{animation:6s ease-in-out infinite float}.character[data-expression=sleepy] .hand{animation:none}@keyframes float{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-5px)rotate(1deg)}}@keyframes shadow{0%,to{opacity:.2;transform:scaleX(1)}50%{opacity:.12;transform:scaleX(.85)}}@keyframes head{0%,40%,to{transform:rotate(0)}55%,70%{transform:rotate(-4deg)}}@keyframes leftWing{0%,to{transform:rotate(0)}50%{transform:rotate(-8deg)}}@keyframes rightWing{0%,to{transform:rotate(0)}50%{transform:rotate(8deg)}}@keyframes blink{0%,42%,46%,93%,97%,to{transform:scaleY(1)}44%,95%{transform:scaleY(.08)}}@keyframes look{0%,30%,to{transform:translate(0)}40%,55%{transform:translate(2px)}70%,85%{transform:translate(-2px)}}@keyframes wave{0%,65%,to{transform:rotate(0)}72%,84%{transform:rotate(12deg)}78%,90%{transform:rotate(-10deg)}}@keyframes glow{0%,to{opacity:1}50%{opacity:.55}}@keyframes curious{0%,to{transform:rotate(-7deg)}50%{transform:rotate(3deg)}}@keyframes nod{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)translateY(2px)}}@keyframes sparkle{0%,to{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}@keyframes snooze{0%{opacity:0;transform:translateY(3px)}45%{opacity:1}to{opacity:0;transform:translateY(-8px)}}@keyframes thought{0%,to{opacity:.25}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.character,.character *{transition:none!important;animation:none!important}}
.os-color-nav{border:1px solid #0000;position:relative}.os-color-nav>svg{color:hsl(var(--nav-hue) 66% 56%);filter:drop-shadow(0 2px 6px hsl(var(--nav-hue) 65% 50% / .12))}.os-color-nav:hover{background:linear-gradient(110deg,hsl(var(--nav-hue) 55% 50% / .12),transparent);border-color:hsl(var(--nav-hue) 45% 55% / .15)}.os-color-nav[data-nav-active=true]{background:linear-gradient(110deg,hsl(var(--nav-hue) 50% 45% / .22),hsl(var(--nav-hue) 50% 45% / .07));border-color:hsl(var(--nav-hue) 50% 55% / .3);color:var(--foreground);box-shadow:inset 3px 0 0 hsl(var(--nav-hue) 65% 57%)}.os-color-nav[data-nav-active=true]>svg{color:hsl(var(--nav-hue) 70% 57%)}@media (max-width:767px){.os-color-nav[data-nav-active=true]{box-shadow:inset 0 3px 0 hsl(var(--nav-hue) 65% 57%);border-radius:10px}}