:root {
  color-scheme: light;
  --ink: #1c1c1c;
  --muted: #6b6560;
  --teal: #1aa39a;
  --teal-deep: #128f87;
  --line: #e6e1da;
  --paper: #ffffff;
  --sand: #f3efe8;
  --serif: Palatino, "Palatino Linotype", Georgia, serif;
  --sans: "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}
.top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 24px 16px;
}
.brand { text-align: center; }
.logo {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
}
.est {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.account-bar {
  position: absolute;
  right: 24px;
  top: 22px;
  display: flex;
  gap: 8px;
  align-items: center;
}
#place-btn {
  position: absolute;
  left: 24px;
  top: 22px;
}
.avatar-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border-color: var(--line);
  background: var(--sand);
  color: var(--ink);
  font-family: var(--serif);
  letter-spacing: 0.04em;
  overflow: hidden;
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip {
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  color: white;
  background: var(--teal);
  letter-spacing: 0.04em;
}
main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 64px; }
h2 {
  margin: 54px 0 22px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
}
button, input, a.button {
  font: inherit;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 10px 16px;
}
button, a.button { cursor: pointer; text-decoration: none; }
button.primary { background: var(--teal); color: white; border-color: var(--teal); }
button.quiet, button.icon { background: transparent; border-color: transparent; }
button.icon { width: 36px; height: 36px; padding: 0; font-size: 22px; }
.notice, .error { margin: 16px 0 0; color: #9a3b32; text-align: center; }
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 28px;
}
.shelf {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 16px;
  margin-top: 28px;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--ink);
}
.card-large .shot {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background-color: var(--sand);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.card:not(.card-large) .shot {
  width: min(100%, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sand) center / cover no-repeat;
}
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--sand);
  text-align: center;
  cursor: default;
}
.note h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
}
.tile { padding: 14px 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tile h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
}
.card-large h3 { font-size: 28px; }
.ribbon, .pill {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pill.taken { color: #9a3b32; }
.pill.joint, .ribbon { color: var(--teal-deep); }
.muted { color: var(--muted); text-align: center; }
dialog {
  width: min(440px, calc(100% - 24px));
  border: 0;
  border-radius: 16px;
  padding: 28px;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}
dialog::backdrop { background: rgba(20, 24, 23, 0.45); }
#gift-dialog { width: min(680px, calc(100% - 24px)); }
.dialog-head, .detail-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.profile-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.profile-id h2 { margin: 0; }
#me-dialog[open] { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
#logout { width: 100%; }
dialog h2, dialog h3, .detail h3 { margin: 0; font-family: var(--serif); font-weight: 500; }
dialog form, .detail { display: flex; flex-direction: column; gap: 14px; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
dialog input { border-radius: 12px; }
dialog .notice, dialog .error, dialog .muted { text-align: left; }
#me-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--sand);
}
.people img, .people .avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sand);
}
.people .avatar {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  letter-spacing: 0.04em;
}
.detail-shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background-color: var(--sand);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
a.go {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal-deep);
  font-size: 14px;
  cursor: pointer;
}
a.go svg { width: 14px; height: 14px; display: block; }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.people li { display: flex; gap: 12px; align-items: center; }
.who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who-phone { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.actions button.primary, dialog button.primary { background: var(--teal); color: white; border-color: var(--teal); }
#place-dialog { width: min(520px, calc(100% - 24px)); }
.invite { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.invite .dialog-head { width: 100%; }
.invite-kicker {
  margin: 0;
  color: var(--teal-deep);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.invite h2 { font-size: 42px; }
.invite-when, .invite-where { margin: 0; }
.invite-where { line-height: 1.55; }
.invite-rule { width: 56px; height: 1px; margin: 2px 0; border: 0; background: var(--teal); }
.invite-map { width: 100%; height: 230px; border: 0; border-radius: 12px; background: var(--sand); }
#place-dialog a.button { width: 100%; text-align: center; background: var(--teal); color: white; border-color: var(--teal); }
@media (max-width: 900px) {
  .account-bar, #place-btn { position: static; }
  .account-bar { margin-top: 12px; }
  .top { flex-direction: column; }
  .shelf { grid-template-columns: repeat(3, 1fr); }
  .notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .featured { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: 1fr 1fr; }
  .notes { grid-template-columns: 1fr; }
}
#celebrate {
  position: fixed;
  inset: 0;
  z-index: 40;
  perspective: 1400px;
  background: #14110e;
  cursor: pointer;
}
#celebrate.out { animation: celebrate-out 0.5s ease forwards; }
.story { position: absolute; inset: 0; }
.story-bars {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}
.story-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.story-bars i::after { content: ""; display: block; height: 100%; width: 0; background: #fff; }
.story-bars i.done::after { width: 100%; }
.story-bars i.go::after { animation: bar-fill var(--hold) linear forwards; }
.story-hint {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 22px;
  margin: 0;
  text-align: center;
  color: rgba(247, 241, 230, 0.72);
  font-size: 12px;
  letter-spacing: 0.08em;
}
#celebrate[data-scene="tea"] .story-bars i,
#celebrate[data-scene="eat"] .story-bars i { background: rgba(28, 28, 28, 0.15); }
#celebrate[data-scene="tea"] .story-bars i::after,
#celebrate[data-scene="eat"] .story-bars i::after { background: var(--ink); }
#celebrate[data-scene="tea"] .story-hint,
#celebrate[data-scene="eat"] .story-hint { color: var(--muted); }
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(16%) rotateY(14deg);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s;
}
.scene.on { z-index: 2; opacity: 1; transform: none; }
.scene.leave { z-index: 1; opacity: 0; transform: translateX(-16%) rotateY(-14deg); transform-origin: right center; }
.scene h2 {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 11vh;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(36px, 7vw, 68px);
  font-weight: normal;
}
.stage { position: absolute; left: 50%; top: 14%; width: min(520px, 94vw); height: 360px; transform: translateX(-50%); }
@media (min-width: 900px) {
  .stage { top: 12%; width: 620px; height: 420px; }
  .scene h2 { font-size: 76px; }
}
.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene.drink { background: radial-gradient(circle at 50% 36%, #2a5248, #121816 68%); color: #f7f1e6; }
.scene.tea { background: radial-gradient(circle at 50% 30%, #fff, var(--sand) 70%); color: var(--ink); }
.scene.eat { background: #fff; color: var(--ink); }
.scene.toast { background: radial-gradient(circle at 50% 40%, #3a2a24, #1a1412 70%); color: #f7f1e6; }
.scene.party { background: #14110e; color: #f7f1e6; }
.glass { position: absolute; top: 36px; width: 78px; display: flex; flex-direction: column; align-items: center; }
.glass.left { left: 50%; margin-left: -118px; }
.glass.right { left: 50%; margin-left: 40px; }
.bowl {
  position: relative;
  width: 72px;
  height: 92px;
  border: 2px solid rgba(247, 241, 230, 0.95);
  border-bottom-width: 3px;
  border-radius: 36px 36px 34px 34px / 18px 18px 46px 46px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.28), transparent 32%, transparent 70%, rgba(255, 255, 255, 0.14));
  overflow: hidden;
  box-shadow: inset 8px 0 12px rgba(255, 255, 255, 0.08), inset -6px -8px 10px rgba(0, 0, 0, 0.15);
}
.bowl span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 0;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(#f6e2a8, #d0893a 55%, #8d4b32);
}
.bowl i {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 7px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, 0.7), transparent);
}
.stem { width: 3px; height: 54px; background: linear-gradient(#fff, #f7f1e6); }
.foot { width: 48px; height: 10px; border: 2px solid #f7f1e6; border-radius: 50%; background: transparent; }
.scene.drink.on .glass.left { animation: slide-left 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scene.drink.on .glass.right { animation: slide-right 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scene.drink.on .bowl span { animation: fill-up 1s 0.35s ease both; }
.ring {
  position: absolute;
  left: 50%;
  top: 78px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border: 2px solid #f2d48a;
  border-radius: 50%;
  opacity: 0;
}
.scene.drink.on .ring { animation: ring 0.7s 0.85s ease-out both; }
.bubble {
  position: absolute;
  top: 108%;
  border: 1.5px solid rgba(247, 241, 230, 0.9);
  border-radius: 50%;
  background: rgba(247, 241, 230, 0.12);
  animation: rise linear infinite;
}
.pot { position: absolute; right: -6%; top: 0; width: min(320px, 78vw); transform-origin: 58% 62%; }
.pot img { display: block; width: 100%; }
.scene.tea.on .pot { animation: pour 2.15s ease both; }
.pour-line {
  position: absolute;
  left: 7%;
  top: 39%;
  width: 5px;
  height: 0;
  border-radius: 4px;
  background: linear-gradient(#e7b15a, #c45c26);
  transform-origin: top center;
}
.scene.tea.on .pour-line { animation: stream 2.15s ease both; }
.cup {
  position: absolute;
  left: 2%;
  top: 214px;
  width: 108px;
  height: 58px;
  border: 3px solid #5c3317;
  border-top: 3px solid #5c3317;
  border-radius: 8px 8px 54px 54px;
  background: linear-gradient(#f7f1e6, #e4d3bf);
  overflow: hidden;
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.45), 0 8px 0 rgba(92, 51, 23, 0.08);
}
.cup i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#e7b15a, #a86b2d); }
.cup b {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  height: 8px;
  border-radius: 8px;
  background: rgba(92, 51, 23, 0.18);
}
.scene.tea.on .cup i { animation: cup-fill 0.7s 0.7s ease both; }
.steam { position: absolute; width: 42px; height: 78px; overflow: visible; opacity: 0; }
.steam path { fill: none; stroke: rgba(90, 82, 74, 0.45); stroke-width: 3.5; stroke-linecap: round; }
.steam.b path:last-child { stroke-width: 2; }
.steam.a { left: 4%; top: 150px; }
.steam.b { left: 14%; top: 138px; width: 36px; height: 64px; }
.steam.c { left: 22%; top: 158px; width: 50px; height: 86px; }
.scene.tea.on .steam { animation: steam 1.3s 1.15s ease-in both; }
.scene.tea.on .steam.b { animation-delay: 1.3s; }
.scene.tea.on .steam.c { animation-delay: 1.45s; }
.wisp {
  position: absolute;
  width: 22px;
  height: 56px;
  background: none;
  border: 3px solid rgba(110, 100, 90, 0.35);
  border-color: transparent rgba(110, 100, 90, 0.4) transparent rgba(110, 100, 90, 0.15);
  border-radius: 70% 30% 60% 40%;
  animation: wisp 1.8s ease-in infinite;
}
.wisp.curl { width: 34px; height: 40px; border-radius: 80% 20% 75% 25%; border-width: 4px; }
.wisp.ribbon { width: 10px; height: 72px; border-radius: 40% 80% 30% 70%; }
.leaf {
  position: absolute;
  top: -16px;
  width: 16px;
  height: 9px;
  border-radius: 0 12px 0 12px;
  background: linear-gradient(#6d9a55, #2f5a38);
  animation: confetti-fall linear infinite;
}
.eat-bg { position: absolute; inset: 0; overflow: hidden; }
.glow {
  position: absolute;
  left: 8%;
  top: 18%;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 177, 90, 0.35), transparent 68%);
}
.scene.eat.on .glow { animation: glow-move 3s ease-in-out alternate infinite; }
.dish { position: absolute; overflow: visible; }
.chicken { left: 2%; top: 14%; width: min(180px, 38vw); }
.fish { right: 2%; top: 16%; width: min(190px, 40vw); }
.steak { left: 8%; bottom: 16%; width: min(170px, 36vw); }
.scene.eat.on .chicken { animation: drift 3s ease-in-out alternate infinite; }
.scene.eat.on .fish { animation: drift 3.4s 0.2s ease-in-out alternate-reverse infinite; }
.scene.eat.on .steak { animation: drift 2.8s 0.4s ease-in-out alternate infinite; }
.plate {
  position: absolute;
  left: 50%;
  top: 54px;
  width: 230px;
  height: 230px;
  margin-left: -115px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 48%, #f7f1e6 49% 58%, #e4d9cc 59% 64%, #fff 65% 78%, #d9cfc3 79% 86%, #fff 87%);
  box-shadow: 0 18px 30px rgba(28, 28, 28, 0.1), inset 0 0 0 10px rgba(255, 255, 255, 0.7);
}
.plate i {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #f3efe8 70%);
  box-shadow: inset 0 8px 12px rgba(28, 28, 28, 0.05);
}
.scene.eat.on .plate { animation: plate-in 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.fork, .knife { position: absolute; top: 70px; height: 190px; overflow: visible; }
.fork { left: 2%; width: 42px; }
.knife { right: 4%; width: 36px; }
.scene.eat.on .fork { animation: fork-in 0.8s 0.1s both; }
.scene.eat.on .knife { animation: knife-in 0.8s 0.2s both; }
.stage.vials { display: flex; justify-content: center; align-items: flex-end; gap: 36px; }
.vial { position: relative; width: 58px; height: 210px; }
.vial .lip { position: absolute; top: 0; left: -4px; right: -4px; height: 12px; border: 3px solid #f7f1e6; border-radius: 4px; }
.tube {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 8px;
  bottom: 0;
  border: 3px solid #f7f1e6;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 42%, rgba(255, 255, 255, 0.05));
}
.liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.vial.a .liquid { background: linear-gradient(#b7ebe4, #128f87); }
.vial.b .liquid {
  background: repeating-linear-gradient(115deg, #e4b15a 0 8px, #f6e2a8 8px 16px);
  background-size: 48px 48px;
}
.vial.c .liquid { background: linear-gradient(#f0a090, #c4483c); }
.scene.toast.on .vial.a .liquid { animation: cup-fill 1.1s ease both; }
.scene.toast.on .vial.b .liquid { animation: cup-fill 1.3s 0.15s ease both, swirl 0.8s linear infinite; }
.scene.toast.on .vial.c .liquid { animation: cup-fill 1s 0.3s ease both, wobble 0.7s 1s ease-in-out infinite; }
.orb { position: absolute; bottom: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.o1 { left: 8px; width: 7px; height: 7px; }
.o2 { left: 20px; width: 4px; height: 4px; }
.o3 { left: 30px; width: 9px; height: 9px; }
.scene.toast.on .orb { animation: orb 1s linear infinite; }
.scene.toast.on .o2 { animation-duration: 1.3s; animation-delay: 0.2s; }
.scene.toast.on .o3 { animation-duration: 0.85s; animation-delay: 0.35s; }
.foam {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 58%;
  height: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  opacity: 0;
}
.scene.toast.on .foam { animation: foam 0.55s 1s ease-in-out infinite; }
.popble { position: absolute; border-radius: 50%; opacity: 0; animation: rise-pop ease-in infinite; }
.spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: spark-out 1.15s ease-out forwards;
}
.bit {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear infinite;
}
.bit.round { width: 8px; height: 8px; border-radius: 50%; }
.flash {
  position: absolute;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #e4b15a 30%, transparent 70%);
  animation: flash 0.7s ease-out forwards;
}
.greet {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(360px, calc(100% - 48px));
  margin: 0;
  padding: 28px 24px 26px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.scene.party.on .greet { animation: greet-in 0.7s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.greet p { margin: 0; }
.greet p:first-child {
  color: var(--teal-deep);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.greet h2 { position: static; margin: 8px 0 6px; font-size: 46px; color: var(--ink); }
@keyframes slide-left {
  0% { transform: translateX(-140px) rotate(-20deg); }
  46% { transform: translateX(48px) rotate(12deg); }
  64%, 100% { transform: translateX(30px) rotate(3deg); }
}
@keyframes slide-right {
  0% { transform: translateX(140px) rotate(20deg); }
  46% { transform: translateX(-48px) rotate(-12deg); }
  64%, 100% { transform: translateX(-30px) rotate(-3deg); }
}
@keyframes fill-up { from { height: 0; } to { height: 58%; } }
@keyframes ring { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(6); } }
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.95; }
  100% { transform: translateY(-125vh); opacity: 0; }
}
@keyframes pour {
  0%, 12% { transform: rotate(0); }
  40%, 68% { transform: rotate(-16deg); }
  100% { transform: rotate(-3deg); }
}
@keyframes stream {
  0%, 20% { height: 0; }
  42%, 70% { height: 54px; }
  100% { height: 0; }
}
@keyframes cup-fill { from { height: 0; } to { height: 72%; } }
@keyframes steam { 0% { opacity: 0; transform: translateY(10px) scaleY(0.6); } 30% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-56px) scaleY(1.2); } }
@keyframes wisp { 0% { opacity: 0; transform: translateY(16px); } 25% { opacity: 0.75; } 100% { opacity: 0; transform: translateY(-70px); } }
@keyframes glow-move { from { transform: translate(-8%, 0); } to { transform: translate(24%, 12%); } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes swirl { to { background-position: 48px 0; } }
@keyframes orb { 0% { transform: translateY(0); opacity: 0.15; } 20% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
@keyframes foam { 0%, 100% { opacity: 0.9; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.08) translateY(-4px); } }
@keyframes wobble { 50% { transform: scaleY(1.06); } }
@keyframes rise-pop {
  0% { transform: translateY(12px) scale(0.5); opacity: 0; }
  18% { opacity: 0.95; transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(var(--dy)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--dy) - 10px)) scale(1.8); }
}
@keyframes plate-in { 0% { transform: scale(0.7) rotate(-8deg); opacity: 0; } 18% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: rotate(8deg); } }
@keyframes fork-in { from { opacity: 0; transform: translate(-70px, 30px) rotate(-60deg); } to { opacity: 1; transform: rotate(-24deg); } }
@keyframes knife-in { from { opacity: 0; transform: translate(70px, 30px) rotate(60deg); } to { opacity: 1; transform: rotate(24deg); } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cheers {
  0% { transform: translateY(80px); }
  28% { transform: translateY(-16px); }
  42% { transform: translateY(0); }
  70% { transform: translateY(0); }
  84% { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}
@keyframes spark-out { to { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; } }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(480deg); } }
@keyframes flash { from { opacity: 1; transform: scale(0.2); } to { opacity: 0; transform: scale(1.5); } }
@keyframes greet-in { from { opacity: 0; transform: translate(-50%, -28%) scale(0.86) rotate(-2deg); } to { opacity: 1; transform: translate(-50%, -46%) scale(1); } }
@keyframes bar-fill { to { width: 100%; } }
@keyframes celebrate-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #celebrate { display: none; }
}