html,body,#root{background:0 0;height:100%;margin:0;overflow:hidden}#root{box-sizing:border-box;padding:8px}.mood{height:100%}.mood__track{box-sizing:border-box;background:linear-gradient(90deg,#22c55e,#eab308 50%,#ef4444);border:2px solid #ffffffe6;border-radius:8px;height:100%;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000080}.mood__arrow{aspect-ratio:24/40;height:62%;top:6%;left:calc(var(--mood) * 100%);transform:translateX(calc(var(--mood) * -100%));fill:#fff;stroke:#000;stroke-width:2px;stroke-linejoin:round;transition:left 1.5s ease-in-out,transform 1.5s ease-in-out;position:absolute}.mood__legend{color:#fff;text-shadow:0 1px 3px #000000e6;justify-content:space-between;align-items:center;font:700 18px/1 system-ui,sans-serif;display:flex;position:absolute;bottom:6px;left:8px;right:8px}.mood__smiley{font-size:5rem}.mood__label{color:#fff;text-shadow:0 1px 3px #000000e6;font-size:3.5rem}