:root{color-scheme:dark;--cream:#f5e7ce;--gold:#d7b574;--green:#172b24}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#101e19;color:var(--cream);font-family:Georgia,'Times New Roman',serif}.experience{height:100svh;display:flex;align-items:center;justify-content:center;gap:clamp(25px,6vw,110px);padding:20px;background:radial-gradient(ellipse at 68% 50%,#45503a55,transparent 65%),repeating-linear-gradient(95deg,#ffffff01 0 1px,transparent 1px 5px)}.intro{width:300px;flex-shrink:0}.eyebrow{font:10px/1.8 system-ui;letter-spacing:2.4px;color:var(--gold)}.ornament{color:var(--gold);font-size:40px;margin:24px 0 8px}h1{font-size:clamp(42px,5vw,67px);font-weight:400;letter-spacing:-2px;line-height:1.08;margin:0 0 25px}h1 em{color:var(--gold);font-weight:400}p{font-size:17px;line-height:1.8;color:#dddbc9}.rule{width:42px;height:1px;background:#c7a96a66;margin:28px 0}.instruction{font:12px/1.9 system-ui;color:#c5cbbb}.progress{margin-top:30px;font:10px system-ui;letter-spacing:1px;color:var(--gold)}.progress>div{width:170px;height:2px;background:#ffffff19;margin-top:12px}.progress i{display:block;height:100%;background:var(--gold);transition:width 1s;width:0}.countdown{display:block;font:11px system-ui;color:#c5cbbb;margin-top:15px}.motion{display:block;background:transparent;border:1px solid #bda87440;color:#d5c8aa;border-radius:25px;padding:11px 17px;font:11px system-ui;margin:30px 0 20px;cursor:pointer}small{font:10px system-ui;color:#8d9c8b}.room{height:calc(100svh - 40px);max-width:calc(100vw - 390px);aspect-ratio:1103/1426;position:relative}.scene{width:100%;height:100%;position:relative;isolation:isolate;overflow:hidden;border-radius:16px;box-shadow:0 25px 70px #0008,0 0 0 1px #e5c08044}.background{width:100%;height:100%;display:block}.color-depth{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 53% 72%,#ffae3212,transparent 35%),linear-gradient(90deg,#16213728,transparent 30%,transparent 75%,#25130630);box-shadow:inset 0 0 65px #2e160940;z-index:2}.character,.cookie{position:absolute;inset:0;background:url('assets/sala.jpeg') center/100% 100%;pointer-events:none;transform-origin:50% 90%}.santa{clip-path:polygon(8% 60%,13% 54%,26% 53%,34% 62%,32% 69%,43% 68%,44% 75%,34% 80%,14% 80%);animation:breathe 4.5s ease-in-out infinite}.penguin{clip-path:ellipse(12% 9% at 15% 81%);animation:breathe 3.9s ease-in-out infinite reverse}.bear{clip-path:ellipse(11% 11% at 67% 77%);animation:breathe 5s ease-in-out infinite}.snowman{clip-path:ellipse(10% 10% at 88% 72%);animation:breathe 4.7s ease-in-out infinite reverse}.mouse{clip-path:polygon(34% 78%,40% 75%,49% 77%,53% 75%,56% 77%,56% 82%,53% 84%,38% 84%);transform-origin:47% 84%;animation:nibble 2.8s ease-in-out infinite}.cookie{clip-path:ellipse(4.8% 4% at 48.7% 85.2%);transform-origin:48% 88%;animation:cookie 2.8s ease-in-out infinite}.fire{position:absolute;left:45%;top:67%;width:16%;height:11%;border-radius:50%;background:radial-gradient(ellipse,#ffdb6066,#ff8c0022 45%,transparent 70%);mix-blend-mode:screen;animation:fire 1.7s infinite alternate;pointer-events:none}.light{position:absolute;width:1.2%;aspect-ratio:1;border-radius:50%;background:#fff5b6;box-shadow:0 0 7px 3px #ffd95a,0 0 18px 7px #ffb62c88;animation:twinkle 2.7s infinite alternate;pointer-events:none}.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffeec1;box-shadow:0 0 7px #ffe0a0;animation:float 8s infinite ease-in-out;pointer-events:none}.snowflake{position:absolute;color:white;animation:snowfall linear infinite;font:12px Georgia;opacity:0}#snow{position:absolute;left:0;top:14.5%;width:13%;height:25%;overflow:hidden;clip-path:polygon(0 5%,40% 0,75% 7%,100% 25%,100% 100%,0 100%);pointer-events:none}.steam{position:absolute;width:2%;height:5%;border-left:2px solid #fff6;border-radius:50%;filter:blur(1px);animation:steam 3.8s infinite ease-out;pointer-events:none}#days{position:absolute;inset:0;z-index:5}.day{position:absolute;width:9.1%;height:6.4%;border:1px solid transparent;border-radius:10px;background:transparent;transition:background .3s,box-shadow .3s,transform .3s;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2v28M4 9l24 14M4 23L28 9M11 5l5 5 5-5M11 27l5-5 5 5M4 14l7-2-1-7M28 18l-7 2 1 7M4 18l7 2-1 7M28 14l-7-2 1-7' stroke='%23fff1c7' stroke-width='2' fill='none'/%3E%3C/svg%3E") 16 16,pointer}.day:hover,.day:focus-visible{background:#fff6b21c;box-shadow:0 0 20px #ffdc8788,inset 0 0 15px #ffe7ab44;border-color:#ffe6a7;outline:none;transform:translateY(-2px)}.day.visited:after{content:'✦';position:absolute;right:1px;bottom:-1px;font-size:12px;color:#fff4bd;text-shadow:0 0 6px #603400}.day.today{box-shadow:0 0 14px #ffe0a766}.scene-caption{position:absolute;bottom:1%;left:12%;right:12%;text-align:center;background:#263327df;border:1px solid #e3c48655;border-radius:25px;padding:7px 9px;font:9px system-ui;letter-spacing:.4px;z-index:6;pointer-events:none}.mobile-motion{display:none}dialog{padding:42px 40px 30px;border:1px solid #dfbd7d;border-radius:22px;width:min(450px,calc(100vw - 32px));max-height:94svh;color:#304133;background:radial-gradient(ellipse at top,#fffaf0,#f3e5cc);box-shadow:0 30px 100px #0009,inset 0 0 0 7px #fff8eb;text-align:center;overflow:hidden}dialog[open]{animation:reveal .65s cubic-bezier(.16,1,.3,1)}dialog::backdrop{background:#0c1b18a8;backdrop-filter:blur(7px)}.close{position:absolute;right:14px;top:9px;color:#7b735d;font:28px Georgia;background:none;border:0;cursor:pointer;padding:5px 10px}.modal-label{font:10px system-ui;letter-spacing:2.5px;color:#8c6c3d}.modal-icon{display:block;font-size:44px;color:#a37b39;margin:20px 0 10px;animation:twinkle 3s infinite alternate}h2{font-size:31px;font-weight:400;margin:0 0 18px;line-height:1.15}dialog p{color:#5d6253;font-size:17px;line-height:1.8;margin:0}.modal-rule{color:#ac8751;margin:18px auto}.invitation{font-style:italic;font-size:14px!important}.keep{display:block;width:100%;background:#26483a;border:1px solid #315342;border-radius:9px;color:#fff1d5;padding:14px;font:12px system-ui;margin:26px 0 16px;cursor:pointer}.keep span{margin-left:12px}.modal-footer{font:9px system-ui;letter-spacing:1px;color:#8e8065}.modal-stars{position:absolute;inset:0;pointer-events:none;color:#d1af6b50;font-size:55px;letter-spacing:60px;animation:float 9s infinite}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}@keyframes breathe{50%{transform:translateY(-.12%) scale(1.0015)}}@keyframes nibble{0%,60%,100%{transform:rotate(0)}65%,75%,85%{transform:rotate(.45deg)}70%,80%{transform:rotate(-.25deg)}}@keyframes cookie{0%,60%,100%{transform:translateY(0)}70%,80%{transform:translateY(-.35%) rotate(-.4deg)}}@keyframes twinkle{from{opacity:.4}to{opacity:1}}@keyframes fire{to{opacity:.5;transform:scale(1.13,.95)}}@keyframes float{0%,100%{opacity:.1;transform:translate(0,8px)}50%{opacity:.9;transform:translate(8px,-18px)}}@keyframes steam{0%{opacity:0;transform:translate(0,5px) scale(.6)}30%{opacity:.6}100%{opacity:0;transform:translate(8px,-22px) scale(1.5)}}@keyframes snowfall{0%{transform:translate(0,-15px);opacity:0}10%,80%{opacity:.8}100%{transform:translate(12px,240px);opacity:0}}@keyframes reveal{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:850px){.experience{gap:22px;padding:12px}.intro{width:230px}.room{max-width:calc(100vw - 276px);height:auto;max-height:calc(100svh - 24px)}h1{font-size:44px}.eyebrow{font-size:8px}.intro p{font-size:14px}}@media(max-width:600px){.experience{padding:0;display:grid;place-items:center;background:radial-gradient(ellipse,#394834,#101e19)}.intro{display:none}.room{width:min(100vw,calc(100svh * 1103 / 1426));height:auto;max-width:100vw;max-height:100svh}.scene{border-radius:0}.mobile-motion{display:block;position:fixed;right:10px;bottom:max(12px,env(safe-area-inset-bottom));border:1px solid #d5b77466;background:#172b24dd;color:#f7e6c7;border-radius:50%;width:36px;height:36px;z-index:7}.scene-caption{font-size:8px;padding:6px}.day{min-height:24px}dialog{padding:34px 25px 24px}h2{font-size:28px}dialog p{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-height:600px) and (min-width:601px){.intro .ornament,.intro .rule,.intro small{display:none}.intro h1{font-size:35px;margin-bottom:10px}.intro p{font-size:12px;margin:10px 0}.progress{margin-top:12px}.motion{margin:15px 0}.room{height:calc(100svh - 20px);width:auto}}