.may-welcome-morph {
  --morph-primary: #871d2e;
  --morph-primary-soft: #f2dfe2;
  --morph-background: #faf8f4;
  --morph-surface: #f8f1f0;
  --morph-card: #fff;
  --morph-border: #958a84;
  display: grid;
  width: 176px;
  height: 176px;
  place-items: center;
}
@media (prefers-color-scheme: dark) {
  .may-welcome-morph {
    --morph-primary: #e2a0af;
    --morph-primary-soft: #4a2a37;
    --morph-background: #1a1017;
    --morph-surface: #30202a;
    --morph-card: #241820;
    --morph-border: #947784;
  }
}
.light .may-welcome-morph {
  --morph-primary: #871d2e;
  --morph-primary-soft: #f2dfe2;
  --morph-background: #faf8f4;
  --morph-surface: #f8f1f0;
  --morph-card: #fff;
  --morph-border: #958a84;
}
.dark .may-welcome-morph {
  --morph-primary: #e2a0af;
  --morph-primary-soft: #4a2a37;
  --morph-background: #1a1017;
  --morph-surface: #30202a;
  --morph-card: #241820;
  --morph-border: #947784;
}
.may-morph-stage { position: relative; width: 164px; height: 164px; opacity: var(--morph-opacity, 0); transform: scale(var(--morph-entrance-scale, .94)); }
.may-morph-shadow { position: absolute; left: 34px; top: 145px; width: 96px; height: 11px; border-radius: 999px; opacity: .7; background: var(--morph-primary-soft); transform: scaleX(var(--morph-shadow-x, .72)); }
.may-morph-lock-shackle { position: absolute; left: 54px; top: 25px; width: 56px; height: 63px; border-radius: 29px 29px 0 0; background: var(--morph-primary); opacity: var(--morph-lock, 0); transform: translateY(calc(var(--morph-shackle-translate, 18) * 1px)); z-index: 2; }
.may-morph-shackle-opening { position: absolute; left: 10px; top: 10px; width: 36px; height: 48px; border-radius: 20px 20px 0 0; background: var(--morph-background); }
.may-morph-camera-handle { position: absolute; left: 51px; top: 31px; width: 68px; height: 38px; border: 7px solid var(--morph-primary); border-bottom: 0; border-radius: 11px 11px 0 0; opacity: var(--morph-camera, 0); transform: translateY(calc(var(--morph-camera-translate, 8) * 1px)); z-index: 2; }
.may-morph-camera-handle-grip { position: absolute; left: 17px; top: -7px; width: 26px; height: 7px; border-radius: 0 0 5px 5px; background: var(--morph-primary); }
.may-morph-camera-rear-wheel { position: absolute; left: 17px; top: 65px; width: 30px; height: 49px; border: 4px solid var(--morph-primary); border-radius: 12px; overflow: hidden; background: var(--morph-primary-soft); opacity: var(--morph-camera, 0); transform: translateY(calc(var(--morph-camera-translate, 8) * 1px)); z-index: 2; }
.may-morph-camera-rear-wheel i { position: absolute; left: 4px; width: 16px; height: 2px; border-radius: 2px; background: var(--morph-primary); opacity: .68; }
.may-morph-camera-lens-barrel { position: absolute; left: 124px; top: 68px; width: 31px; height: 38px; border: 4px solid var(--morph-primary); border-radius: 8px; background: var(--morph-surface); opacity: var(--morph-camera, 0); transform: translateY(calc(var(--morph-camera-translate, 8) * 1px)); z-index: 4; }
.may-morph-camera-lens-hood { position: absolute; left: 147px; top: 63px; width: 14px; height: 48px; border: 3px solid var(--morph-primary); border-radius: 7px; background: var(--morph-primary); opacity: var(--morph-camera, 0); transform: translateY(calc(var(--morph-camera-translate, 8) * 1px)); z-index: 5; }
.may-morph-shared-shell { position: absolute; left: 21px; top: 20px; width: 122px; height: 112px; border: 4px solid var(--morph-primary); border-radius: 20px; background: var(--morph-surface); overflow: hidden; transform: translateY(calc(var(--morph-shell-translate, 0) * 1px)) scale(var(--morph-shell-x, .7), var(--morph-shell-y, 1)); z-index: 3; }
.may-morph-flat-highlight { position: absolute; left: 7px; right: 7px; top: 7px; height: 5px; border-radius: 5px; background: var(--morph-card); opacity: .72; }
.may-morph-book-cover-frame { position: absolute; left: 58px; top: 34px; width: 58px; height: 78px; border: 2px solid var(--morph-border); border-radius: 8px; opacity: var(--morph-journal, 1); z-index: 4; }
.may-morph-book-spine { position: absolute; left: 40px; top: 23px; width: 17px; height: 106px; border-right: 3px solid var(--morph-primary); opacity: var(--morph-spine, 1); transform: translateY(calc(var(--morph-spine-translate, 0) * 1px)); z-index: 4; }
.may-morph-book-spine i { position: absolute; left: 0; top: 25px; width: 13px; height: 3px; border-radius: 3px; background: var(--morph-primary); }
.may-morph-book-spine i + i { top: 74px; }
.may-morph-book-band { position: absolute; left: 36px; top: 65px; width: 92px; height: 25px; border-radius: 5px; background: var(--morph-primary); opacity: var(--morph-journal, 1); z-index: 5; }
.may-morph-bookmark { position: absolute; left: 76px; top: 120px; width: 14px; height: 23px; border-radius: 0 0 2px 2px; background: var(--morph-primary); opacity: var(--morph-journal, 1); z-index: 5; }
.may-morph-bookmark i { position: absolute; left: 3px; bottom: -5px; width: 8px; height: 8px; background: var(--morph-background); transform: rotate(45deg); }
.may-morph-camera-screen { position: absolute; left: 65px; top: 66px; width: 46px; height: 46px; border: 2px solid var(--morph-border); border-radius: 7px; background: var(--morph-card); opacity: var(--morph-camera, 0); transform: translateY(calc(var(--morph-camera-translate, 8) * 1px)); z-index: 4; }
.may-morph-camera-button { position: absolute; left: 48px; top: 96px; width: 13px; height: 13px; border: 2px solid var(--morph-primary); border-radius: 4px; background: var(--morph-primary-soft); opacity: var(--morph-camera, 0); z-index: 4; }
.may-morph-camera-vent { position: absolute; left: 112px; top: 102px; width: 15px; height: 12px; opacity: var(--morph-camera, 0); z-index: 4; }
.may-morph-camera-vent i { position: absolute; bottom: 0; width: 2px; height: 10px; border-radius: 2px; background: var(--morph-primary); }
.may-morph-camera-base-bar { position: absolute; left: 43px; top: 122px; width: 79px; height: 7px; border-radius: 0 0 7px 7px; background: var(--morph-primary); opacity: var(--morph-camera, 0); z-index: 4; }
.may-morph-lock-top-seam { position: absolute; left: 34px; top: 69px; width: 96px; height: 20px; opacity: var(--morph-lock, 0); z-index: 4; }
.may-morph-lock-top-seam path { fill: none; stroke: var(--morph-primary); stroke-width: 3.5px; stroke-linecap: round; }
.may-morph-keyhole-circle { position: absolute; left: 75px; top: 96px; width: 14px; height: 14px; border-radius: 7px; background: var(--morph-primary); opacity: var(--morph-lock, 0); z-index: 5; }
.may-morph-keyhole-stem { position: absolute; left: 78px; top: 106px; width: 8px; height: 16px; border-radius: 0 0 4px 4px; background: var(--morph-primary); opacity: var(--morph-lock, 0); z-index: 5; }