html.christmas body { background-color: #0a1420; background-image: radial-gradient(ellipse 80% 50% at 10% 0%, rgba(214,52,58,.20), transparent 60%), radial-gradient(ellipse 70% 45% at 92% 6%, rgba(46,160,90,.20), transparent 60%), radial-gradient(ellipse 90% 40% at 50% 100%, rgba(200,225,255,.10), transparent 65%); }
html.christmas body::before { content: ''; position: fixed; top: 150px; right: 4vw; width: 90px; height: 90px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 38% 36%, #ffffff, #e3ecf7 60%, #b8c8dc); box-shadow: 0 0 40px 12px rgba(200,220,255,.20), 0 0 120px 40px rgba(160,190,255,.10); opacity: .8; }
html.christmas body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 80px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 45% 100% at 15% 100%, rgba(235,245,255,.10), transparent 70%), radial-gradient(ellipse 40% 90% at 55% 100%, rgba(235,245,255,.08), transparent 70%), radial-gradient(ellipse 45% 100% at 90% 100%, rgba(235,245,255,.10), transparent 70%); }
html.christmas .top { background: rgba(10,20,32,.88); border-bottom-color: #27405a; }
html.christmas .top .px { background: linear-gradient(90deg, #ff5a5f, #ffd447); -webkit-background-clip: text; background-clip: text; }
html.christmas .top .ex { color: #4ee08a; }
html.christmas .card, html.christmas .tot, html.christmas .stat, html.christmas .chartbox, html.christmas .hero, html.christmas .wdbox, html.christmas .ddmenu, html.christmas .room, html.christmas .bdg, html.christmas .doc, html.christmas .lookbox, html.christmas input, html.christmas select { background-color: #10202e; border-color: #24405a; }
html.christmas .lookrow, html.christmas .outfit { background-color: #0d1a26; border-color: #24405a; }
html.christmas #bar2, html.christmas .ranges { background: #0d1a26; border-color: #24405a; }
html.christmas .card:hover, html.christmas .bdg:hover, html.christmas a.lookrow:hover, html.christmas .outfit:hover, html.christmas .outfit.on { border-color: #d6343a; }
html.christmas button.active, html.christmas .top button.active, html.christmas .ranges button.active, html.christmas .furnictl button.active { background: #d6343a; border-color: #d6343a; color: #fff; }
html.christmas .top button:hover { background: #1c3247; }
html.christmas .doc h2, html.christmas .doc a, html.christmas .back:hover { color: #ffd447; }

.xbar { display: none; }
html.christmas .xbar { display: block; position: relative; text-align: center; padding: 5px 90px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #fff4f4; background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px), linear-gradient(90deg, #6e1216, #c62828 50%, #6e1216); border-bottom: 1px solid #27405a; }
.xtog { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 9px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; font: inherit; font-size: 10px; cursor: pointer; }
.xtog:hover { background: rgba(0,0,0,.45); }
@media (max-width: 560px) { html.christmas .xbar { padding: 5px 84px 5px 8px; text-align: left; font-size: 10px; } }
html.xcalm .snow, html.xcalm .xsky, html.xcalm .xburst { display: none !important; }

.snow { display: none; }
html.christmas .snow { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.snow i { position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); filter: blur(.4px); animation: snowfall var(--d) linear var(--dl) infinite; }
.snow i.fl { border-radius: 0; filter: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' fill='none'%3E%3Cpath d='M20 3V37M5.3 11.5L34.7 28.5M5.3 28.5L34.7 11.5'/%3E%3Cpath d='M15 6L20 10L25 6M15 34L20 30L25 34M6 17L11 15L9 10M34 23L29 25L31 30M6 23L11 25L9 30M34 17L29 15L31 10'/%3E%3C/g%3E%3C/svg%3E"); animation: snowfall var(--d) linear var(--dl) infinite, flakespin 9s linear infinite; }
@keyframes snowfall {
  0% { translate: 0 -30px; }
  25% { translate: calc(var(--dx) * .5) 25vh; }
  50% { translate: calc(var(--dx) * -.5) 50vh; }
  75% { translate: calc(var(--dx) * .4) 75vh; }
  100% { translate: 0 calc(100vh + 30px); }
}
@keyframes flakespin { to { rotate: 360deg; } }

.xlights { display: none; }
html.christmas .xlights { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 30px; overflow: hidden; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M0 4Q28 20 56 4' stroke='%23234a33' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x 0 0 / 56px 24px; }
.xlights i { position: absolute; top: 12px; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: currentColor; box-shadow: 0 0 8px 2px currentColor; animation: twinkle 2.6s ease-in-out infinite; }
.xlights i::before { content: ''; position: absolute; top: -3px; left: 1.5px; width: 5px; height: 4px; border-radius: 1px; background: #2b3a2f; }
.xlights i.c0 { color: #ff4d4d; }
.xlights i.c1 { color: #ffd447; }
.xlights i.c2 { color: #4ee08a; }
.xlights i.c3 { color: #59b4ff; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: 0 0 2px 0 currentColor; } }

.xscene { display: flex; justify-content: center; align-items: flex-end; gap: 1.2rem; padding: 1.5rem 1rem 0; }
.xscene i { display: block; width: 84px; height: 76px; cursor: pointer; background: center bottom / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255,220,120,.30)); }
.xscene i.t { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Crect x='44' y='78' width='12' height='11' fill='%236b4423'/%3E%3Cpath fill='%231b5e31' d='M50 42L88 80H12Z'/%3E%3Cpath fill='%2323753d' d='M50 26L80 58H20Z'/%3E%3Cpath fill='%232f8a4a' d='M50 12L72 40H28Z'/%3E%3Cpath stroke='%23f5c542' stroke-width='2' fill='none' d='M33 50Q50 58 68 48M24 72Q50 80 78 68'/%3E%3Ccircle cx='40' cy='34' r='3.5' fill='%23d6343a'/%3E%3Ccircle cx='58' cy='44' r='3.5' fill='%2359b4ff'/%3E%3Ccircle cx='36' cy='62' r='3.5' fill='%23f5c542'/%3E%3Ccircle cx='64' cy='64' r='3.5' fill='%23d6343a'/%3E%3Ccircle cx='50' cy='70' r='3.5' fill='%2359b4ff'/%3E%3Ccircle cx='56' cy='28' r='3' fill='%23f5c542'/%3E%3Cpath fill='%23ffd447' d='M50 1L52.4 6.6L58.6 6.6L53.6 10.2L55.4 16L50 12.6L44.6 16L46.4 10.2L41.4 6.6L47.6 6.6Z'/%3E%3C/svg%3E"); }
.xscene i.g { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Crect x='18' y='40' width='64' height='48' rx='3' fill='%23d6343a'/%3E%3Crect x='12' y='30' width='76' height='14' rx='3' fill='%23e8484e'/%3E%3Crect x='45' y='30' width='10' height='58' fill='%23f5c542'/%3E%3Cellipse cx='39' cy='22' rx='12' ry='7' fill='none' stroke='%23f5c542' stroke-width='5' transform='rotate(-20 39 22)'/%3E%3Cellipse cx='61' cy='22' rx='12' ry='7' fill='none' stroke='%23f5c542' stroke-width='5' transform='rotate(20 61 22)'/%3E%3Ccircle cx='50' cy='28' r='5' fill='%23e0ad2a'/%3E%3C/svg%3E"); }
.xscene i.g2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Crect x='18' y='40' width='64' height='48' rx='3' fill='%232f8a4a'/%3E%3Crect x='12' y='30' width='76' height='14' rx='3' fill='%233aa35a'/%3E%3Crect x='45' y='30' width='10' height='58' fill='%23d6343a'/%3E%3Cellipse cx='39' cy='22' rx='12' ry='7' fill='none' stroke='%23d6343a' stroke-width='5' transform='rotate(-20 39 22)'/%3E%3Cellipse cx='61' cy='22' rx='12' ry='7' fill='none' stroke='%23d6343a' stroke-width='5' transform='rotate(20 61 22)'/%3E%3Ccircle cx='50' cy='28' r='5' fill='%23b52a2f'/%3E%3C/svg%3E"); }
.xscene i.s { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' d='M37 40L22 30M63 40L78 30'/%3E%3Ccircle cx='50' cy='68' r='20' fill='%23eef4fb'/%3E%3Ccircle cx='50' cy='41' r='14' fill='%23f4f8fd'/%3E%3Ccircle cx='50' cy='20' r='10' fill='%23fafcff'/%3E%3Crect x='38' y='27' width='24' height='5' rx='2' fill='%23d6343a'/%3E%3Crect x='54' y='29' width='5' height='13' rx='2' fill='%23b52a2f'/%3E%3Crect x='41' y='1' width='18' height='10' fill='%231d1d1d'/%3E%3Crect x='36' y='10' width='28' height='3' rx='1' fill='%231d1d1d'/%3E%3Crect x='41' y='7' width='18' height='2.5' fill='%23d6343a'/%3E%3Ccircle cx='46' cy='18' r='1.5' fill='%23222'/%3E%3Ccircle cx='54' cy='18' r='1.5' fill='%23222'/%3E%3Cpath fill='%23f08a24' d='M50 20L62 22L50 23Z'/%3E%3Ccircle cx='50' cy='38' r='1.8' fill='%23222'/%3E%3Ccircle cx='50' cy='46' r='1.8' fill='%23222'/%3E%3Ccircle cx='50' cy='62' r='2' fill='%23222'/%3E%3C/svg%3E"); }
.xscene i.g { width: 62px; height: 56px; }
.xscene i.s { width: 108px; height: 98px; }
.xscene i.s.nohat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' d='M37 40L22 30M63 40L78 30'/%3E%3Ccircle cx='50' cy='68' r='20' fill='%23eef4fb'/%3E%3Ccircle cx='50' cy='41' r='14' fill='%23f4f8fd'/%3E%3Ccircle cx='50' cy='20' r='10' fill='%23fafcff'/%3E%3Crect x='38' y='27' width='24' height='5' rx='2' fill='%23d6343a'/%3E%3Crect x='54' y='29' width='5' height='13' rx='2' fill='%23b52a2f'/%3E%3Ccircle cx='46' cy='18' r='1.5' fill='%23222'/%3E%3Ccircle cx='54' cy='18' r='1.5' fill='%23222'/%3E%3Cpath fill='%23f08a24' d='M50 20L62 22L50 23Z'/%3E%3Ccircle cx='50' cy='38' r='1.8' fill='%23222'/%3E%3Ccircle cx='50' cy='46' r='1.8' fill='%23222'/%3E%3Ccircle cx='50' cy='62' r='2' fill='%23222'/%3E%3C/svg%3E"); }
.xflyhat { position: absolute; z-index: 6; width: 34px; height: 16px; margin-left: -17px; pointer-events: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='36 1 28 12'%3E%3Crect x='41' y='1' width='18' height='10' fill='%231d1d1d'/%3E%3Crect x='36' y='10' width='28' height='3' rx='1' fill='%231d1d1d'/%3E%3Crect x='41' y='7' width='18' height='2.5' fill='%23d6343a'/%3E%3C/svg%3E"); animation: xflyhat 1.6s cubic-bezier(.3,.7,.5,1) forwards; }
@keyframes xflyhat {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  40% { transform: translate(60px, -110px) rotate(200deg); opacity: 1; }
  100% { transform: translate(110px, 30px) rotate(420deg); opacity: 0; }
}
.xscene i.jump { animation: xjump .5s ease-out; }
@keyframes xjump { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.08, .94); } 60% { transform: translateY(0) scale(.95, 1.06); } }

.xpop { position: absolute; z-index: 6; transform: translate(-50%, -100%); pointer-events: none; }
.xpop span { position: relative; display: block; margin-bottom: 10px; padding: 5px 11px; border-radius: 12px; background: #fffaf0; color: #7a1418; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; animation: xbubble 2.2s ease-out forwards; }
.xpop span::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fffaf0; }
@keyframes xbubble {
  0% { transform: scale(.4); opacity: 0; }
  12% { transform: scale(1.08); opacity: 1; }
  20%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
html.christmas .top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath fill='%23f4f8fd' d='M0 0H40V4Q35 9 30 5Q25 2 20 6Q14 10 9 5Q5 2 0 5Z'/%3E%3C/svg%3E") repeat-x 0 0 / 46px 10px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
html.christmas .card::before { content: ''; position: absolute; z-index: 1; left: -1px; right: -1px; top: -1px; height: 10px; border-radius: 10px 10px 0 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath fill='%23f4f8fd' d='M0 0H40V4Q35 9 30 5Q25 2 20 6Q14 10 9 5Q5 2 0 5Z'/%3E%3C/svg%3E") repeat-x 0 0 / 34px 10px; opacity: .92; transform-origin: top; animation: xpile 30s ease-out both; }
@keyframes xpile { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

html.christmas .top h1 { position: relative; }
.xhat { position: absolute; left: -15px; top: -19px; width: 26px; height: 22px; pointer-events: none; transform: rotate(-20deg); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath fill='%23d6343a' d='M5 26Q9 6 26 3Q37 2 38 15L33 16Q32 11 28 12Q31 18 32 26Z'/%3E%3Crect x='2' y='23' width='32' height='9' rx='4.5' fill='%23f4f8fd'/%3E%3Ccircle cx='36' cy='18' r='4.5' fill='%23f4f8fd'/%3E%3C/svg%3E"); filter: drop-shadow(1px 2px 0 rgba(0,0,0,.4)); }
@media (max-width: 700px) { .xhat { left: -9px; top: -12px; width: 21px; height: 18px; } }

.xsky { position: fixed; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; }
.xsky i { position: absolute; left: 0; top: 18vh; width: 250px; height: 74px; translate: -280px 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 245 72'%3E%3Cdefs%3E%3Cg id='r'%3E%3Cpath stroke='%235e3a20' stroke-width='2.5' stroke-linecap='round' d='M140 40L129 46M145 41L134 50M158 41L169 47M161 40L173 43'/%3E%3Cellipse cx='150' cy='36' rx='15' ry='7' fill='%237a4b2a'/%3E%3Cpath fill='%237a4b2a' d='M159 33L167 19L172 21L165 37Z'/%3E%3Cellipse cx='172' cy='19' rx='6.5' ry='4' fill='%237a4b2a'/%3E%3Cpath stroke='%23c8a070' stroke-width='1.8' stroke-linecap='round' fill='none' d='M168 16L163 5M165 10L160 8M171 15L172 4M172 9L176 6'/%3E%3Ccircle cx='135' cy='33' r='2.5' fill='%23f0e6d8'/%3E%3Ccircle cx='178' cy='20' r='1.8' fill='%233b2414'/%3E%3C/g%3E%3C/defs%3E%3Cpath stroke='%23f5c542' stroke-width='1' fill='none' d='M100 34L137 34M166 30L192 34'/%3E%3Cuse href='%23r'/%3E%3Cuse href='%23r' x='55'/%3E%3Ccircle cx='233' cy='20' r='2.6' fill='%23ff3b3b'/%3E%3Ccircle cx='36' cy='18' r='10' fill='%238a5a2b'/%3E%3Crect x='44' y='13' width='9' height='9' fill='%232f8a4a'/%3E%3Ccircle cx='63' cy='22' r='11' fill='%23d6343a'/%3E%3Ccircle cx='67' cy='9' r='6' fill='%23f2c9a0'/%3E%3Cpath fill='%23fff' d='M61 10Q67 23 73 10Z'/%3E%3Cpath fill='%23d6343a' d='M61 6Q66 -5 78 1L74 6Z'/%3E%3Crect x='60' y='4' width='15' height='3' rx='1.5' fill='%23fff'/%3E%3Ccircle cx='78' cy='1' r='2.3' fill='%23fff'/%3E%3Cpath fill='%23c62828' d='M18 26L92 26Q104 26 104 38L104 48L22 48Q16 40 18 26Z'/%3E%3Crect x='17' y='24' width='80' height='4' rx='2' fill='%23f5c542'/%3E%3Cpath stroke='%23f5c542' stroke-width='3' stroke-linecap='round' fill='none' d='M8 56L96 56Q108 56 110 46M34 48L34 56M84 48L84 56'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 8px rgba(255,220,140,.35)); animation: xsleigh 55s linear 4s infinite; }
@keyframes xsleigh {
  0% { translate: -280px 40px; }
  12% { translate: 45vw 0; }
  25% { translate: calc(100vw + 40px) -40px; }
  25.01%, 100% { translate: calc(100vw + 40px) -40px; }
}

.xscene b { display: block; position: relative; cursor: pointer; }
.xglobe { width: 70px; height: 80px; background: center bottom / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 90'%3E%3Ccircle cx='40' cy='38' r='32' fill='%23bfe3ff' fill-opacity='.18' stroke='%23d8efff' stroke-width='2'/%3E%3Cpath fill='%23f4f8fd' d='M10.5 50Q40 40 69.5 50A32 32 0 0 1 10.5 50Z'/%3E%3Cpath fill='%232f8a4a' d='M40 22L51 45H29Z'/%3E%3Crect x='38' y='45' width='4' height='4' fill='%236b4423'/%3E%3Ccircle cx='40' cy='21' r='2.2' fill='%23ffd447'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='24' cy='30' r='1.3'/%3E%3Ccircle cx='56' cy='26' r='1.2'/%3E%3Ccircle cx='30' cy='17' r='1'/%3E%3Ccircle cx='53' cy='40' r='1.1'/%3E%3Ccircle cx='20' cy='42' r='1'/%3E%3Ccircle cx='60' cy='46' r='1'/%3E%3C/g%3E%3Cpath d='M19 24Q23 13 33 10' stroke='%23fff' stroke-opacity='.6' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Cpath fill='%238a1c22' d='M14 66L66 66L72 86L8 86Z'/%3E%3Crect x='12' y='63' width='56' height='6' rx='3' fill='%23f5c542'/%3E%3Crect x='9' y='79' width='62' height='3' fill='%23f5c542'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 10px rgba(160,210,255,.35)); transform-origin: 50% 90%; }
.xglobe.shake { animation: xshake .7s ease-in-out; }
@keyframes xshake { 0%, 100% { rotate: 0deg; } 15% { rotate: -14deg; } 35% { rotate: 12deg; } 55% { rotate: -9deg; } 75% { rotate: 5deg; } }
.xburst { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.xburst i { position: absolute; top: -12px; border-radius: 50%; background: #fff; opacity: .85; animation-name: xburst; animation-timing-function: ease-in; animation-fill-mode: both; }
@keyframes xburst { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .9; } 100% { translate: var(--dx) calc(100vh + 20px); opacity: .6; } }

.xbuild { width: 90px; height: 112px; }
.xbuild span { position: absolute; display: block; pointer-events: none; }
.xbuild .m { left: 0; right: 0; bottom: 0; height: 16px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(#f4f8fd, #c9d8ea); box-shadow: 0 0 12px rgba(200,225,255,.25); }
.xbuild .p1, .xbuild .p2, .xbuild .p3 { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #dbe6f2 70%, #b9cbe0); }
.xbuild .p1 { left: 22px; bottom: 6px; width: 46px; height: 46px; }
.xbuild .p2 { left: 28px; bottom: 44px; width: 34px; height: 34px; }
.xbuild .p3 { left: 32px; bottom: 72px; width: 26px; height: 26px; }
.xbuild .p4, .xbuild .p5 { inset: 0; background: center / 100% 100% no-repeat; }
.xbuild .p4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 112'%3E%3Cpath stroke='%236b4423' stroke-width='2.5' stroke-linecap='round' fill='none' d='M31 48L14 38M20 41L17 35M59 48L76 38M70 41L73 35'/%3E%3Cg fill='%23222'%3E%3Ccircle cx='41' cy='24' r='1.7'/%3E%3Ccircle cx='49' cy='24' r='1.7'/%3E%3Ccircle cx='45' cy='45' r='1.8'/%3E%3Ccircle cx='45' cy='53' r='1.8'/%3E%3Ccircle cx='45' cy='62' r='2'/%3E%3C/g%3E%3Cpath fill='%23f08a24' d='M45 27L57 29L45 30.5Z'/%3E%3C/svg%3E"); }
.xbuild .p5 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 112'%3E%3Crect x='33' y='36' width='24' height='5' rx='2.5' fill='%23d6343a'/%3E%3Crect x='49' y='38' width='5' height='13' rx='2' fill='%23b52a2f'/%3E%3Crect x='36' y='1' width='18' height='14' fill='%231d1d1d'/%3E%3Crect x='32' y='14' width='26' height='3' rx='1' fill='%231d1d1d'/%3E%3Crect x='36' y='10' width='18' height='3' fill='%23d6343a'/%3E%3C/svg%3E"); }
.xbuild .p1, .xbuild .p2, .xbuild .p3, .xbuild .p4, .xbuild .p5 { opacity: 0; transform: scale(.3); transform-origin: 50% 100%; transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.xbuild.s1 .p1, .xbuild.s2 .p2, .xbuild.s3 .p3, .xbuild.s4 .p4, .xbuild.s5 .p5 { opacity: 1; transform: none; }
.xbuild.melt span:not(.m) { opacity: 0; transform: scale(1.2, 0); transition: opacity 1.2s ease-in, transform 1.2s ease-in; }

.xball { position: fixed; z-index: 11; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #ffffff, #d9e5f2); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.xsplat { position: fixed; z-index: 11; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f4f8fd'%3E%3Cpath d='M20 8Q25 12 29 9Q28 15 33 17Q28 20 31 26Q25 25 22 31Q19 26 13 29Q14 23 8 20Q13 17 11 11Q16 13 20 8Z'/%3E%3Ccircle cx='34' cy='8' r='2'/%3E%3Ccircle cx='6' cy='30' r='1.6'/%3E%3Ccircle cx='33' cy='32' r='1.4'/%3E%3Ccircle cx='7' cy='9' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); animation: xsplat 1.6s ease-out forwards; }
@keyframes xsplat { 0% { transform: scale(.3); opacity: 1; } 15% { transform: scale(1); } 65% { opacity: .9; } 100% { transform: scale(1) translateY(8px); opacity: 0; } }

.xpresent { position: absolute; z-index: 3; width: 22px; height: 22px; cursor: pointer; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Crect x='18' y='40' width='64' height='48' rx='3' fill='%23d6343a'/%3E%3Crect x='12' y='30' width='76' height='14' rx='3' fill='%23e8484e'/%3E%3Crect x='45' y='30' width='10' height='58' fill='%23f5c542'/%3E%3Cellipse cx='39' cy='22' rx='12' ry='7' fill='none' stroke='%23f5c542' stroke-width='5' transform='rotate(-20 39 22)'/%3E%3Cellipse cx='61' cy='22' rx='12' ry='7' fill='none' stroke='%23f5c542' stroke-width='5' transform='rotate(20 61 22)'/%3E%3Ccircle cx='50' cy='28' r='5' fill='%23e0ad2a'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 4px rgba(255,212,71,.55)); animation: xwiggle 6s ease-in-out infinite; }
.xpresent.open { animation: xopen .6s ease-in forwards; pointer-events: none; }
@keyframes xwiggle { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -14deg; } 94% { rotate: 12deg; } 97% { rotate: -6deg; } }
@keyframes xopen { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.5) translateY(-6px); } 100% { transform: scale(.2) translateY(-30px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .snow, .xsky { display: none !important; } .xlights i { animation: none; } .xscene i.jump { animation: none; } html.christmas .card::before { animation: none; } .xscene .shake, .xpresent { animation: none !important; } }