:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  --ink: #403944;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
}

.smiley-field {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}

.smiley {
  --size: 3.8rem;
  --skin: #ffd166;
  --accent: #ff8a65;
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--skin);
  box-shadow: inset -7px -8px 0 rgb(211 145 42 / 12%), 0 10px 20px rgb(85 60 42 / 10%);
  transform: translate(-50%, -50%);
  animation: float var(--duration, 5s) ease-in-out infinite alternate, appear .8s cubic-bezier(.2,.8,.2,1) both;
  will-change: transform;
}

.smiley::before, .smiley::after { content: ""; position: absolute; top: 35%; width: 13%; height: 20%; background: var(--ink); border-radius: 50%; }
.smiley::before { left: 27%; }
.smiley::after { right: 27%; }

.smiley__mouth { position: absolute; left: 50%; top: 53%; width: 35%; height: 20%; transform: translateX(-50%); border-bottom: .16rem solid var(--ink); border-radius: 0 0 100% 100%; }
.smiley__blush { position: absolute; top: 54%; width: 19%; height: 9%; border-radius: 50%; background: var(--accent); opacity: .55; }
.smiley__blush--left { left: 12%; }
.smiley__blush--right { right: 12%; }

.smiley--wink::after { top: 40%; height: 0; width: 20%; border-top: .16rem solid var(--ink); border-radius: 0; }
.smiley--surprised::before, .smiley--surprised::after { width: 14%; height: 18%; }
.smiley--sleepy::before, .smiley--sleepy::after { top: 42%; height: 0; width: 19%; border-top: .17rem solid var(--ink); border-radius: 0; }
.smiley--heart::before, .smiley--heart::after { top: 34%; width: 20%; height: 20%; background: none; border-radius: 0; color: #f05d78; font-size: calc(var(--size) * .24); line-height: 1; }
.smiley--heart::before { left: 24%; content: "♥"; }
.smiley--heart::after { right: 24%; content: "♥"; }
.smiley--tongue .smiley__mouth { height: 26%; background: var(--ink); border: 0; border-radius: 0 0 50% 50%; }
.smiley--tongue .smiley__mouth::after { content: ""; position: absolute; bottom: -2%; left: 50%; width: 55%; height: 55%; transform: translateX(-50%); border-radius: 50%; background: #f27b86; }
.smiley--cool::before, .smiley--cool::after { top: 34%; width: 25%; height: 20%; background: #4e5368; border: .12rem solid #292d3c; border-radius: .2rem; }
.smiley--cool .smiley__mouth { width: 25%; border-bottom-style: dotted; }
.smiley--cool .smiley__glasses { position: absolute; left: 50%; top: 42%; width: 55%; border-top: .13rem solid #292d3c; transform: translateX(-50%); }
.smiley--happy .smiley__mouth { width: 38%; }
.smiley--pink { --skin: #ffb7c8; --accent: #ee7793; }
.smiley--blue { --skin: #b9e5ff; --accent: #65b9e8; }
.smiley--mint { --skin: #c8f3d1; --accent: #66c98d; }
.smiley--sunset { --skin: #ffb27e; --accent: #ed765f; }

@keyframes appear { from { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-18deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes float { from { margin-top: -8px; } to { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .smiley { animation: none; }
}