:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; }
body { background: #100e1d; color: #fff; }
button, a { -webkit-tap-highlight-color: transparent; }
#experience { min-height: 100svh; }
.scene {
  --primary: #241045;
  --secondary: #6635a0;
  --accent: #ffd46b;
  --text-color: #fff;
  --cake-color: #fa80bb;
  --gift-color: #a15ee6;
  --scene-light: color-mix(in srgb, var(--accent) 45%, white);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 34px 18px 45px;
  color: var(--text-color);
  text-align: center;
  background: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--secondary) 82%, #fff) -20%, transparent 60%), linear-gradient(155deg, var(--primary) 8%, var(--secondary) 53%, var(--primary) 100%);
}
.scene[data-background="gradient"] { background: linear-gradient(155deg, var(--primary) 6%, var(--secondary) 60%, color-mix(in srgb, var(--primary) 64%, black)); }
.scene[data-background="solid"] { background: var(--primary); }
.scene[data-background="spotlight"] { background: radial-gradient(ellipse at 50% 2%, color-mix(in srgb, var(--accent) 43%, var(--secondary)), transparent 57%), radial-gradient(ellipse at 50% 38%, var(--secondary), transparent 68%), var(--primary); }
.scene[data-background="night"] { background: radial-gradient(ellipse at 78% 8%, color-mix(in srgb, var(--secondary) 62%, transparent), transparent 58%), radial-gradient(ellipse at 5% 75%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 55%), var(--primary); }
.scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  opacity: .85;
  background: radial-gradient(ellipse at 10% 13%, color-mix(in srgb, var(--accent) 23%, transparent), transparent 37%), radial-gradient(ellipse at 92% 44%, color-mix(in srgb, var(--secondary) 56%, transparent), transparent 41%), radial-gradient(ellipse at 48% 92%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 50%);
  animation: light-breathe 11s ease-in-out infinite alternate;
}
.scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 95% 85% at 50% 40%, transparent 32%, #05020d87 100%), repeating-linear-gradient(0deg, #fff0 0 3px, #ffffff04 3px 4px);
  opacity: .64;
}
.scene-light-rig { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.scene-light { position: absolute; display: block; width: 90%; height: 80%; mix-blend-mode: screen; filter: blur(32px); opacity: .35; }
.scene-light-left { left: -57%; top: -5%; transform: rotate(-24deg); background: linear-gradient(95deg, transparent 35%, color-mix(in srgb, var(--secondary) 77%, white) 66%, transparent 90%); }
.scene-light-right { right: -61%; top: -5%; transform: rotate(29deg); background: linear-gradient(80deg, transparent 20%, color-mix(in srgb, var(--accent) 45%, var(--secondary)) 53%, transparent 80%); }
.scene-light-center { inset: auto auto -39% 2%; width: 96%; height: 65%; opacity: .25; background: radial-gradient(ellipse, var(--secondary), transparent 72%); }
.scene[data-font="elegant"] { font-family: Georgia, "Times New Roman", serif; }
.scene[data-font="playful"] { font-family: "Trebuchet MS", system-ui, sans-serif; }
.scene-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 490px); gap: 14px; min-height: 440px; }
.scene-kicker { font-size: .64rem; font-weight: 750; letter-spacing: .27em; text-transform: uppercase; opacity: .76; text-shadow: 0 2px 12px #000a; }
.scene-title { font-size: clamp(2rem, 8vw, 3.3rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 860; margin: 1px 0 0; overflow-wrap: anywhere; text-shadow: 0 3px 0 #0002, 0 14px 38px #0008, 0 0 32px color-mix(in srgb, var(--accent) 25%, transparent); }
.scene[data-font="elegant"] .scene-title { font-weight: 600; letter-spacing: -.03em; }
.hint { margin: 0; font-size: clamp(.9rem, 2.9vw, 1rem); line-height: 1.5; opacity: .87; letter-spacing: .015em; text-shadow: 0 4px 15px #0008; }
.hero { position: relative; border: 0; background: none; display: grid; place-items: center; width: 252px; min-height: 222px; padding: 0; cursor: pointer; filter: drop-shadow(0 20px 18px #0005); transition: transform .28s cubic-bezier(.2,.7,.1,1), filter .28s; }
.hero:focus-visible, .gift-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 15px; }
.hero:not(:disabled):hover { transform: translateY(-4px) scale(1.035); filter: drop-shadow(0 25px 20px #0007); }
.hero:not(:disabled):active { transform: translateY(2px) scale(.97); }
.hero:disabled { cursor: default; }
.hero:not(.hero-birthday)::before { content: ""; position: absolute; width: 195px; height: 195px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 21%, transparent), transparent 68%); filter: blur(6px); }
.hero-symbol, .tree-art { position: relative; display: grid; place-items: center; width: 200px; height: 198px; line-height: 1; font-size: clamp(7rem, 25vw, 9.5rem); filter: drop-shadow(0 8px 3px #0004) drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 29%, transparent)); }
.hero-symbol::after, .tree-art::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 1%; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 31%, transparent); filter: blur(12px); }
.hero-birthday { min-height: 234px; }
.cake-art { position: relative; display: block; width: 236px; height: 219px; transform: translateY(8px); }
.cake-halo { position: absolute; z-index: 0; left: -24px; top: 34px; width: 280px; height: 180px; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); filter: blur(15px); }
.cake-ground-shadow { position: absolute; z-index: 0; left: 15px; bottom: 0; width: 205px; height: 21px; border-radius: 50%; background: #05020f9b; filter: blur(11px); }
.cake-plate { position: absolute; z-index: 1; left: 8px; bottom: 6px; width: 220px; height: 23px; border-radius: 50%; background: linear-gradient(180deg, #fff 0%, #e7e4ed 38%, color-mix(in srgb, var(--accent) 33%, #81819b) 75%, #3e3447 100%); box-shadow: inset 0 3px 3px #fff, 0 3px 0 #655e68, 0 12px 14px #0007, 0 0 16px color-mix(in srgb, var(--accent) 38%, transparent); }
.cake-base { position: absolute; z-index: 2; left: 27px; bottom: 21px; width: 182px; height: 96px; border-radius: 8px 8px 23px 23px / 6px 6px 18px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--cake-color) 56%, #21142f) 0%, color-mix(in srgb, var(--cake-color) 87%, white) 20%, var(--cake-color) 48%, color-mix(in srgb, var(--cake-color) 67%, white) 72%, color-mix(in srgb, var(--cake-color) 53%, #100a1a) 100%); box-shadow: inset 0 -15px 18px #2a0b3078, inset 0 6px 4px #ffffff52, inset -9px 0 15px #2609236b, 0 13px 18px #0008, 0 0 26px color-mix(in srgb, var(--cake-color) 33%, transparent); }
.cake-base::before { content: ""; position: absolute; top: 9px; bottom: 10px; left: 22px; width: 18px; border-radius: 50%; opacity: .5; filter: blur(7px); transform: rotate(12deg); background: linear-gradient(90deg, transparent, #fff, transparent); }
.cake-base::after { content: ""; position: absolute; bottom: 0; left: 4%; width: 92%; height: 24px; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, transparent, #3416343d); }
.cake-top { position: absolute; z-index: 3; left: 26px; bottom: 101px; width: 184px; height: 43px; border-radius: 50%; border: 2px solid #ffffff89; background: radial-gradient(ellipse at 48% 13%, #fffdf4 0%, color-mix(in srgb, var(--cake-color) 13%, white) 40%, color-mix(in srgb, var(--cake-color) 56%, white) 95%); box-shadow: inset 0 -5px 7px #b6759f63, inset 0 2px 6px #ffffffc5, 0 3px 4px #34132b67; }
.cake-frosting { position: absolute; z-index: 4; left: 26px; bottom: 91px; width: 184px; height: 32px; border-radius: 12px 12px 36px 36px; background: linear-gradient(90deg, #e3c9cf, #fffdf7 24%, #fff1ef 49%, #fffaf8 70%, #b88ea9); box-shadow: inset 0 -7px 5px #c586a258, 0 4px 5px #69244747; clip-path: polygon(0 0, 100% 0, 100% 50%, 94% 82%, 89% 55%, 82% 80%, 74% 50%, 67% 96%, 59% 51%, 50% 78%, 40% 50%, 30% 96%, 22% 54%, 15% 80%, 7% 56%, 0 84%); }
.cake-garnish { position: absolute; z-index: 5; bottom: 99px; left: 34px; width: 168px; height: 23px; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
.cake-pearl { display: block; width: 12px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 25% 20%, #fff, #fff6cf 34%, color-mix(in srgb, var(--accent) 76%, #bf89a4) 72%, #714a5a); box-shadow: 0 2px 2px #0002, 0 0 5px #fff6; }
.cake-candles { position: absolute; z-index: 6; left: 30px; bottom: 132px; width: 176px; height: 64px; display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.cake-candle { position: relative; display: block; width: 12px; height: 39px; flex: none; border-radius: 3px 3px 1px 1px; background: repeating-linear-gradient(140deg, #fff 0 7px, color-mix(in srgb, var(--accent) 69%, #eb8abf) 7px 12px); box-shadow: inset -4px 0 4px #2f29555c, inset 2px 0 2px #fff8, 0 2px 5px #0007; }
.candle-wick { position: absolute; bottom: 100%; left: 5px; height: 5px; width: 2px; background: #393040; }
.candle-flame { position: absolute; bottom: calc(100% + 3px); left: 1px; width: 11px; height: 20px; transform-origin: 50% 95%; transform: rotate(-45deg); border-radius: 75% 0 73% 70%; background: radial-gradient(ellipse at 53% 67%, #fffdf1 0 24%, #ffdb69 42%, #ff9b27 73%, #ef5625 100%); filter: drop-shadow(0 0 5px #fff1a8); box-shadow: 0 0 14px #ffd65e, 0 0 34px #ff9b458e, 0 0 55px color-mix(in srgb, var(--accent) 45%, transparent); animation: flame-flicker .85s ease-in-out infinite alternate; }
.cake-candle:nth-child(2n) .candle-flame { animation-delay: -.4s; }
.candles-out .candle-flame { opacity: 0; animation: none; }
.reveal-panel { position: relative; isolation: isolate; width: 100%; padding: clamp(20px, 5vw, 30px); border-radius: 25px; border: 1px solid color-mix(in srgb, var(--accent) 43%, #fff4); background: linear-gradient(130deg, #ffffff22, #ffffff09 32%, #0d061b69 85%); box-shadow: inset 0 1px 0 #ffffff48, inset 0 -1px 0 #0003, 0 21px 70px #0007, 0 0 42px color-mix(in srgb, var(--secondary) 23%, transparent); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); animation: panel-appear .62s ease both; }
.reveal-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 60%, transparent), color-mix(in srgb, var(--secondary) 32%, transparent)); }
.reveal-panel h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.2; margin: 0 0 13px; overflow-wrap: anywhere; text-shadow: 0 7px 25px #0006; }
.reveal-panel .message { margin: 0; line-height: 1.66; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 3px 12px #0005; }
.gift-button { display: grid; place-items: center; gap: 9px; border: 0; padding: 13px 10px; margin: 10px auto 0; background: none; color: var(--text-color); cursor: pointer; transition: transform .25s, filter .25s; }
.gift-button:hover { transform: translateY(-3px) scale(1.055); filter: brightness(1.15); }
.gift-button:active { transform: scale(.95); }
.gift-button-label { font-size: .85rem; font-weight: 750; letter-spacing: .045em; }
.gift-art { position: relative; display: block; width: 142px; height: 132px; filter: drop-shadow(0 8px 10px #0007); }
.gift-shadow { position: absolute; z-index: 0; left: 14px; bottom: 4px; width: 114px; height: 18px; border-radius: 50%; background: #090411b0; filter: blur(11px); }
.gift-wrap { position: absolute; z-index: 1; left: 21px; top: 48px; width: 100px; height: 77px; border-radius: 3px 4px 11px 11px; overflow: hidden; background: linear-gradient(92deg, color-mix(in srgb, var(--gift-color) 58%, #161020), var(--gift-color) 27%, color-mix(in srgb, var(--gift-color) 65%, #fff) 62%, color-mix(in srgb, var(--gift-color) 56%, #130919)); box-shadow: inset 7px 0 14px #07041655, inset -11px 0 15px #11091d66, inset 0 -12px 13px #1008166d, 0 3px 0 #211024; }
.gift-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(106deg, transparent 20%, #ffffff6b 34%, transparent 45%, transparent 64%, #ffffff26 70%, transparent 78%); opacity: .7; }
.gift-ribbon-horizontal { position: absolute; z-index: 2; top: 72px; left: 21px; width: 100px; height: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, white), var(--accent) 42%, color-mix(in srgb, var(--accent) 58%, #211422)); box-shadow: inset 0 2px 2px #fff6, 0 2px 2px #0003; }
.gift-ribbon { position: absolute; z-index: 3; top: 48px; left: 65px; width: 15px; height: 77px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #543a28), color-mix(in srgb, var(--accent) 48%, white) 48%, color-mix(in srgb, var(--accent) 67%, #37202c)); box-shadow: 1px 0 2px #0003; }
.gift-lid { position: absolute; z-index: 4; top: 34px; left: 12px; width: 118px; height: 27px; border-radius: 5px 5px 4px 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--gift-color) 54%, #180f25), color-mix(in srgb, var(--gift-color) 60%, white) 30%, var(--gift-color) 73%, color-mix(in srgb, var(--gift-color) 59%, #11091c)); box-shadow: inset 0 2px 4px #ffffff9e, inset 0 -7px 6px #100b225e, 0 3px 5px #0006; }
.gift-lid::after { content: ""; position: absolute; left: 48px; top: 0; width: 19px; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, #543d25), color-mix(in srgb, var(--accent) 55%, white) 50%, var(--accent)); }
.gift-bow { position: absolute; z-index: 2; left: 47px; top: -13px; width: 23px; height: 18px; border-radius: 40%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--accent); box-shadow: 0 2px 4px #0005; }
.gift-bow::before, .gift-bow::after { content: ""; position: absolute; top: -2px; width: 32px; height: 24px; border: 7px solid var(--accent); border-radius: 65% 55% 45% 55%; box-shadow: inset 0 2px 3px #ffffffb3, 0 3px 3px #0004; }
.gift-bow::before { right: 13px; transform: rotate(-26deg); }
.gift-bow::after { left: 13px; transform: rotate(26deg); }
.gift-opened { border-top: 1px solid #ffffff44; margin-top: 18px; padding-top: 16px; animation: panel-appear .5s ease both; }
.gift-celebration { width: min(100%, 315px); height: 200px; position: relative; margin: 0 auto 8px; display: grid; place-items: center; isolation: isolate; }
.gift-celebration::before { content: ""; position: absolute; inset: 18px; z-index: -1; border-radius: 50%; opacity: .65; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 33%, transparent), transparent 72%); filter: blur(16px); animation: celebratory-glow 1.6s ease-out both; }
.gift-art-open { z-index: 2; transform: translateY(11px) scale(1.06); animation: gift-rise .58s cubic-bezier(.19,.85,.31,1.25) both; }
.gift-art-open .gift-lid { transform-origin: 80% 80%; animation: gift-lid-pop .85s cubic-bezier(.17,.86,.23,1) both; }
.gift-confetti-burst { position: absolute; z-index: 4; pointer-events: none; width: 1px; height: 1px; left: 50%; top: 49%; overflow: visible; }
.gift-confetti-piece { position: absolute; left: 0; top: 0; width: var(--burst-size); height: calc(var(--burst-size) * 1.5); border-radius: 2px; background: linear-gradient(115deg, #ffffffbc, var(--burst-color) 35%, color-mix(in srgb, var(--burst-color) 56%, #171027) 75%, #ffffff7c); box-shadow: 0 0 4px color-mix(in srgb, var(--burst-color) 48%, transparent); opacity: 0; animation: gift-confetti-pop 1.4s cubic-bezier(.13,.68,.22,1) var(--burst-delay) both; }
.gift-confetti-piece:nth-child(4n) { border-radius: 50%; height: var(--burst-size); }
.gift-confetti-piece:nth-child(5n) { border-radius: 75% 15% 70% 15%; }
.gift-opened h3 { font-size: 1.22rem; line-height: 1.35; overflow-wrap: anywhere; margin: 0; }
.gift-link { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; max-width: 100%; margin-top: 17px; padding: 11px 19px; border-radius: 100px; color: #171020; text-decoration: none; font-weight: 850; overflow-wrap: anywhere; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 68%, white), var(--accent), color-mix(in srgb, var(--accent) 78%, #3e1c20)); box-shadow: inset 0 2px 2px #fff7, 0 10px 24px #0005, 0 0 17px color-mix(in srgb, var(--accent) 30%, transparent); }
.gift-link:hover { filter: brightness(1.12); }
.fx-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.fx { position: absolute; left: var(--x); width: var(--size); height: var(--size); font-size: var(--size); line-height: 1; color: var(--particle-color); opacity: .9; will-change: transform; animation-delay: var(--delay); animation-duration: var(--duration); animation-iteration-count: infinite; animation-timing-function: linear; }
.fx:nth-child(3n) { filter: blur(.7px); opacity: .65; }
.fx-balloons { bottom: -65px; width: calc(var(--size) * 1.4); height: calc(var(--size) * 1.75); border-radius: 53% 53% 48% 48%; background: radial-gradient(ellipse at 31% 26%, #ffffffc5, #ffffff1f 16%, transparent 30%), linear-gradient(95deg, color-mix(in srgb, var(--particle-color) 72%, #1b0c30), var(--particle-color) 45%, color-mix(in srgb, var(--particle-color) 66%, white) 75%, color-mix(in srgb, var(--particle-color) 68%, #1b0c30)); box-shadow: inset -3px -7px 8px #11071a5e, inset 2px 1px 4px #ffffff66, 0 0 15px color-mix(in srgb, var(--particle-color) 30%, transparent); animation-name: float-up; }
.fx-balloons::before { content: ""; position: absolute; left: 43%; bottom: -3px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--particle-color); }
.fx-balloons::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 27px; background: linear-gradient(#fff9,#fff1); }
.fx-confetti { top: -42px; width: var(--size); height: calc(var(--size) * 1.45); border-radius: 2px; background: linear-gradient(120deg, #ffffffb3, var(--particle-color) 42%, color-mix(in srgb, var(--particle-color) 59%, #27143d)); box-shadow: 0 0 4px color-mix(in srgb, var(--particle-color) 34%, transparent); animation-name: fall-down; }
.fx-sparkles { top: -42px; text-shadow: 0 0 9px var(--particle-color), 0 0 19px var(--particle-color); animation-name: fall-down; }
.fx-hearts { bottom: -42px; text-shadow: 0 2px 8px #0005, 0 0 10px var(--particle-color); animation-name: float-up; }
.fx-snow { top: -42px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, white, var(--particle-color) 65%, #ffffff20); box-shadow: 0 0 9px #ffffffa8; animation-name: fall-down; }
.fx-petals { top: -42px; border-radius: 85% 6% 80% 12%; background: linear-gradient(120deg, #ffffffaa, var(--particle-color) 42%, color-mix(in srgb, var(--particle-color) 65%, #5d274f)); box-shadow: 0 0 8px color-mix(in srgb, var(--particle-color) 30%, transparent); animation-name: fall-down; }
@keyframes light-breathe { from { transform: translate3d(-2%, 0, 0) scale(.96); opacity: .7; } to { transform: translate3d(2%, -1%, 0) scale(1.06); opacity: 1; } }
@keyframes flame-flicker { from { transform: rotate(-42deg) scale(.84); } to { transform: rotate(-48deg) scale(1.12); } }
@keyframes panel-appear { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes float-up { from { transform: translate3d(0,0,0) rotate(-8deg); } to { transform: translate3d(27px,-125svh,0) rotate(14deg); } }
@keyframes fall-down { from { transform: translate3d(0,0,0) rotate(0); } to { transform: translate3d(38px,125svh,0) rotate(440deg); } }
@keyframes gift-rise { from { transform: translateY(39px) scale(.83); opacity: .7; } to { transform: translateY(11px) scale(1.06); opacity: 1; } }
@keyframes gift-lid-pop { 0% { transform: translate(0,0) rotate(0deg); } 38% { transform: translate(-5px,-47px) rotate(-10deg); } 100% { transform: translate(36px,-53px) rotate(26deg); } }
@keyframes gift-confetti-pop { 0% { transform: translate(0, 8px) rotate(0deg) scale(.4); opacity: 0; } 10% { opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--burst-rotation)) scale(.75); opacity: 0; } }
@keyframes celebratory-glow { from { transform: scale(.5); opacity: .15; } to { transform: scale(1.3); opacity: .65; } }
@media (max-width: 420px) {
  .scene { padding: 25px 14px 35px; }
  .scene-content { gap: 13px; min-height: 400px; }
  .scene-kicker { font-size: .59rem; letter-spacing: .18em; }
  .hero-birthday { margin: -13px 0; transform: scale(.91); }
  .hero-birthday:hover { transform: scale(.94); }
  .reveal-panel { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx, .gift-confetti-piece { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gift-art-open .gift-lid { transform: translate(36px,-53px) rotate(26deg); }
}