:root {
  --watt-size: 128px;
  --watt-size-desktop: 176px;
  --watt-offset-x: 24px;
  --watt-offset-y: 24px;
  --watt-shadow-room: 22px;
  --watt-peek: 0.92;
  --watt-tab: 0.20;
  --watt-in: 500ms;
  --watt-pause: 400ms;
  --watt-wink: 280ms;
  --watt-hold: 600ms;
  --watt-stay: 3250ms;
  --watt-release: 600ms;
  --watt-out: 400ms;
  --watt-threshold: 0.50;
  --watt-z: 900;
  --watt-shadow: drop-shadow(0 8px 11px rgba(150, 56, 0, .35));
}

.watt-egg {
  position: fixed;
  z-index: var(--watt-z);
  width: var(--watt-size);
  height: var(--watt-size);
  overflow: hidden;
  pointer-events: none;
  padding: 14px 14px var(--watt-shadow-room);
  box-sizing: content-box;
}
@media (min-width: 768px) {
  .watt-egg { width: var(--watt-size-desktop); height: var(--watt-size-desktop); }
}

.watt-egg[data-corner="br"] { right: var(--watt-offset-x); bottom: calc(var(--watt-offset-y) - var(--watt-shadow-room) + env(safe-area-inset-bottom, 0px)); }
.watt-egg[data-corner="bl"] { left: var(--watt-offset-x);  bottom: calc(var(--watt-offset-y) - var(--watt-shadow-room) + env(safe-area-inset-bottom, 0px)); }
.watt-egg[data-corner="tr"] { right: var(--watt-offset-x); top: var(--watt-offset-y); padding: 0 18px 18px; }
.watt-egg[data-corner="tl"] { left: var(--watt-offset-x);  top: var(--watt-offset-y);  padding: 0 18px 18px; }

.watt-egg[data-corner^="t"] .watt-egg__flip { transform: rotate(180deg); }

.watt-egg__flip, .watt-egg__mover, .watt-egg__body { position: relative; width: 100%; height: 100%; }
.watt-egg__mover { transform: translateY(115%); will-change: transform; }
.watt-egg__body { transform-origin: 50% 85%; }
.watt-egg__body img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; user-select: none; -webkit-user-drag: none;
  filter: var(--watt-shadow);
}
.watt-egg__body img[data-off] { visibility: hidden; }

.watt-egg__btn {
  position: absolute; left: 14%; right: 14%; top: 6%; bottom: 0;
  border-radius: 50% 50% 0 0;
  display: block;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.watt-egg__btn:focus-visible { outline: 3px solid #873BFF; outline-offset: -6px; }
.watt-egg[data-state="hidden"] .watt-egg__btn { pointer-events: none; visibility: hidden; }