html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #d9c0aa;
}

body {
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(117, 66, 37, 0.34) 0, rgba(49, 25, 15, 0.18) 30%, transparent 58%),
    radial-gradient(circle at 50% 115%, rgba(96, 48, 25, 0.2), transparent 48%),
    linear-gradient(145deg, #160d09 0%, #0b0604 52%, #030201 100%);
  font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(204, 137, 82, 0.035) 0 1px, transparent 1.5px);
  background-size: 23px 23px;
  transform: rotate(7deg);
  opacity: 0.7;
}

.coffee-scene,
#wake-error,
noscript {
  grid-area: 1 / 1;
}

.coffee-scene {
  width: min(42vw, 290px);
  pointer-events: none;
  user-select: none;
  opacity: 0.72;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.48));
}

.coffee-cup {
  display: block;
  width: 100%;
  overflow: visible;
}

.steam path {
  stroke: #d8b99b;
  stroke-width: 7;
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: steam 5.6s ease-in-out infinite;
}

.steam path:nth-child(2) {
  animation-delay: -1.8s;
}

.steam path:nth-child(3) {
  animation-delay: -3.6s;
}

.cup-shadow {
  fill: rgba(0, 0, 0, 0.45);
}

.saucer {
  fill: #3a2116;
  stroke: #865334;
  stroke-width: 3;
}

.cup-body,
.cup-handle {
  fill: url(#cup-glaze);
  stroke: #d0a079;
  stroke-width: 3;
}

.cup-rim {
  fill: #6c3b24;
  stroke: #d0a079;
  stroke-width: 4;
}

.coffee {
  fill: url(#coffee-surface);
}

.coffee-glint {
  fill: rgba(238, 190, 145, 0.2);
  transform: rotate(-4deg);
  transform-origin: center;
}

@keyframes steam {
  0%,
  100% {
    opacity: 0.12;
    transform: translateY(7px) scaleX(0.94);
  }
  50% {
    opacity: 0.36;
    transform: translateY(-7px) scaleX(1.06);
  }
}

[hidden] {
  display: none !important;
}

#wake-error,
noscript {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  padding: 1.25rem;
  text-align: center;
}

body.needs-gesture {
  cursor: pointer;
}

@media (max-width: 600px) {
  .coffee-scene {
    width: min(60vw, 250px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steam path {
    animation: none;
    opacity: 0.25;
  }
}