@font-face{font-family:Indie Flower;src:url('assets/IndieFlower.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:#f5e1ea;color:#5e384c;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}button:focus-visible,a:focus-visible{outline:2px dashed #8a3c5c;outline-offset:6px}.scene{width:100%;min-height:100svh;display:grid;place-items:center;overflow:hidden;position:relative;background-position:center;background-size:cover;background-repeat:no-repeat}.home-page{background-image:url('assets/background.png')}.composition{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16/9;isolation:isolate;container-type:inline-size;transition:filter .85s,opacity .85s,transform .85s}.layer-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.paper-layer,.timer-layer{position:absolute;inset:0;transform-origin:50% 47%;transition:transform .38s cubic-bezier(.2,.7,.3,1)}.paper-layer{z-index:1;pointer-events:none}.paper-hit{position:absolute;left:27%;top:22%;width:46%;height:49%;transform:rotate(-4deg);background:none;border:0;padding:0;pointer-events:auto;cursor:pointer;border-radius:2%}.paper-hit:focus-visible{outline-offset:-10px}.decorations{z-index:2}.timer-layer{z-index:3;pointer-events:none}.timer-position{position:absolute;left:50.2%;top:46.5%;transform:translate(-50%,-50%);width:41%;text-align:center}.countdown{display:flex;align-items:flex-start;justify-content:center;gap:1.05cqw;font-family:Indie Flower,cursive;font-weight:400}.unit{display:flex;flex-direction:column;align-items:center;min-width:6.8cqw}.unit>span{font-size:5.3cqw;line-height:1.15;font-variant-numeric:tabular-nums}.unit small{font-size:1.45cqw;line-height:1.5}.separator{font-size:4.1cqw;line-height:1.25}.composition.raised .paper-layer{z-index:4}.composition.raised .timer-layer{z-index:5}.composition.raised .paper-layer,.composition.raised .timer-layer{transform:scale(1.055)}.birthday{pointer-events:auto;cursor:pointer;border:1px solid #dba3b7;border-radius:999px;padding:.45cqw 1.7cqw;margin:1.4cqw 0 0;background:#f8dce7;box-shadow:0 3px 10px #a96c8020;font:1.65cqw/1.4 Indie Flower,cursive;transition:transform .25s,background .25s}.birthday:hover{transform:scale(1.04);background:#f2c7d9}.composition.departing{filter:blur(16px);opacity:0;transform:translateY(2%) scale(.97);pointer-events:none}.composition.departing *{pointer-events:none!important}.test-control,.sound-control{position:fixed;z-index:20;display:grid;place-items:center;cursor:pointer;border:1px solid #d894ad80;background:#edb1ca;color:#743d58;border-radius:50%;box-shadow:0 3px 15px #a96c8025;transition:transform .2s;width:38px;height:38px}.test-control{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));font-size:22px}.sound-control{right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));font-size:23px;background:#f8e6eee8}.test-control:hover,.sound-control:hover{transform:scale(1.09)}.sound-control.muted{opacity:.65}.gifts{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}.gift-stage{position:relative;width:min(100vw,150svh);aspect-ratio:16/9;animation:gift-drop 1.05s cubic-bezier(.18,.75,.25,1) both}.gift-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(5%) scale(.96);transition:opacity .45s,transform .55s,visibility .55s;pointer-events:none;display:block}.gift-slide.active{visibility:visible;opacity:1;transform:translateX(0) scale(1);pointer-events:auto}.gift-slide img{width:100%;height:100%;object-fit:contain;transition:transform .3s;pointer-events:none}.gift-slide:hover img,.gift-slide:focus-visible img{transform:scale(1.045)}.gift-slide{clip-path:inset(13% 22% 12%)}.dots{display:flex;gap:14px;z-index:11;margin-top:-3.5vh;animation:fade-in 1.1s both}.dot{width:13px;height:13px;border:1px solid #b77994;border-radius:50%;background:#fff9;cursor:pointer;padding:0;box-shadow:0 0 0 8px transparent;position:relative}.dot:after{content:'';position:absolute;inset:-10px}.dot.selected{background:#b96d8e}.video-page{background-image:url('assets/background-video.png')}.video-content{width:min(82vw,1000px);display:flex;flex-direction:column;align-items:center;gap:24px;padding:45px 0}.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#30212a;box-shadow:0 12px 50px #5a2e4625}video{display:block;width:100%;height:100%;background:#30212a}.video-pending{position:absolute;inset:0 0 45px;display:grid;place-items:center;margin:0;color:#f7dce8;font:clamp(20px,3vw,34px)/1.4 Indie Flower,cursive;pointer-events:none}.home-link,.download-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;color:#633b50;background:#fceef4e8;border:1px solid #dba3b7;border-radius:999px;padding:9px 24px;font:22px/1.25 Indie Flower,cursive;box-shadow:0 4px 15px #a96c8015;transition:transform .25s}.home-link:hover,.download-link:hover{transform:scale(1.045)}.home-link span{font-family:system-ui,sans-serif;font-size:24px}.art-page{background-image:url('assets/background-art.png')}.art-composition{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16/9;transition:transform .3s}.art-composition:has(.art-hit:hover),.art-composition:has(.art-hit:focus-visible){transform:scale(1.025)}.art-hit{position:absolute;left:45%;top:18%;width:49%;height:64%;transform:rotate(4deg);cursor:pointer;border:0;background:none}.art-home{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}.art-home:hover{transform:translateX(-50%) scale(1.045)}dialog{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100svh;margin:0;color:#633b50;overflow:hidden}dialog::backdrop{background:#49324425;backdrop-filter:blur(13px);transition:opacity .45s}.art-modal{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;gap:14px}.art-modal img{display:block;width:min(94vw,calc((100svh - 175px)*1.77778));max-height:calc(100svh - 175px);object-fit:contain;transform-origin:center;animation:art-expand .55s cubic-bezier(.2,.7,.3,1) both;user-select:none}.close-art{font:32px/1 system-ui,sans-serif;border:1px solid #dba3b7;border-radius:50%;width:40px;height:40px;background:#fff0f6;cursor:pointer;z-index:1}.download-link{font-size:20px;animation:fade-in .5s both}.art-modal.closing img{animation:art-collapse .45s ease-in both}.art-modal.closing .close-art,.art-modal.closing .download-link{opacity:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@keyframes gift-drop{0%{opacity:0;transform:translateY(-100svh)}70%{opacity:1;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes art-expand{from{transform:translate(var(--origin-x,24vw),var(--origin-y,0px)) scale(var(--origin-scale,.65)) rotate(4deg);opacity:.3}to{transform:translate(0,0) scale(1) rotate(0);opacity:1}}@keyframes art-collapse{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--origin-x,24vw),var(--origin-y,0px)) scale(var(--origin-scale,.65)) rotate(4deg);opacity:0}}
@media(max-aspect-ratio:3/4){.composition{width:min(154vw,170svh)}.gift-stage{width:150vw;max-width:none;flex-shrink:0}.dots{margin-top:0}.video-content{width:94vw}.art-page{background-size:auto 100%;background-position:25% center}.art-composition{width:155vw;transform:translate(-24%,12%)}.art-composition:has(.art-hit:hover),.art-composition:has(.art-hit:focus-visible){transform:translate(-24%,12%) scale(1.025)}.art-home{bottom:32px}.birthday{font-size:2cqw}.unit small{font-size:1.65cqw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.gifts.no-entrance .gift-stage,.gifts.no-entrance .dots{animation:none}
/* Independent PNG layers preserve each asset's original position. */
.composition{z-index:1}.decoration-layer{position:absolute;inset:0;z-index:2;pointer-events:none;transition:transform .38s cubic-bezier(.2,.7,.3,1)}.flower-layer{transform-origin:75.3% 45.7%}.hat-layer{transform-origin:26.5% 65.7%}.decoration-layer.lifted{z-index:6;transform:scale(1.055)}.decoration-hit{position:absolute;background:none;border:0;padding:0;cursor:pointer;pointer-events:auto}.flower-hit{left:66.3%;top:18.2%;width:18%;height:55%;clip-path:polygon(54% 0,100% 6%,100% 70%,0 100%,0 28%)}.hat-hit{left:21.8%;top:49.8%;width:15.5%;height:32%;clip-path:polygon(0 0,28% 0,100% 64%,91% 83%,43% 100%,20% 100%,13% 23%)}
.composition.raised .paper-layer{z-index:7}.composition.raised .timer-layer{z-index:8}
.clock-effects{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.clock-echo{position:absolute;color:#a65b85;font:clamp(28px,4.5vw,80px)/1.2 Indie Flower,cursive;transform:rotate(var(--clock-rotation));animation:clock-flash 1.5s ease-in-out both;white-space:nowrap}.clock-echo:nth-child(2n){color:#b34d83}
@keyframes clock-flash{0%{opacity:0;scale:.85}15%,48%{opacity:.85;scale:1}100%{opacity:0;scale:1.04}}
.gift-slide.locked{cursor:not-allowed}.gift-slide.locked:hover img{transform:none}
.art-page{background-image:url('assets/background.png')}.message-layer{position:absolute;inset:0;transform-origin:23.5% 47.3%;transition:transform .3s;pointer-events:none}.message-layer:has(.message-hit:hover),.message-layer:has(.message-hit:focus-visible){transform:scale(1.045)}.message-hit{position:absolute;left:9.2%;top:37.2%;width:28.7%;height:20.1%;background:none;border:0;cursor:pointer;pointer-events:auto}
.art-credit{font:20px/1.3 Indie Flower,cursive;margin:0;animation:fade-in .5s both}.art-modal{gap:10px}.art-modal img{width:min(94vw,calc((100svh - 205px)*1.77778));max-height:calc(100svh - 205px)}.art-modal.closing .art-credit{opacity:0}
.heart-effects{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:60px;height:90px;z-index:30;pointer-events:none}.heart-echo{position:absolute;bottom:0;right:0;font-family:system-ui,sans-serif;font-size:38px;animation:heart-float 1.5s ease-out both}
@keyframes heart-float{0%{opacity:0;transform:translateY(8px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.1)}65%{opacity:1}100%{opacity:0;transform:translateY(-65px) scale(.9)}}
@media(max-aspect-ratio:3/4){.art-composition{width:100vw;aspect-ratio:auto;height:80svh;transform:none;display:block}.art-composition:has(.art-hit:hover),.art-composition:has(.art-hit:focus-visible){transform:none}.art-composition>.layer-image{width:170vw;height:auto;aspect-ratio:16/9;left:-65vw;top:25svh}.art-hit{left:13%;top:calc(25svh + 17vw);width:80%;height:58vw}.message-layer{height:80vw;width:220vw;left:-8vw;top:0;transform-origin:23.5% 47.3%}.message-layer>.layer-image{height:auto;aspect-ratio:16/9}.message-hit{top:46vw;height:25vw}.art-home{bottom:24px}}
/* New gift PNGs sit higher in their canvas; leave room for the hover zoom. */
.gift-slide{clip-path:inset(5% 20% 10%)}
.clock-echo{animation-duration:1s}
.eyes-effects{position:fixed;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:60px;height:70px;z-index:30;pointer-events:none}.eyes-echo{position:absolute;bottom:0;left:0;font:38px system-ui,sans-serif;animation:heart-float 1s ease-out both}
/* The source PNG keeps its download size; only its transparent margins are cropped in the viewer. */
.art-modal{gap:9px;padding:12px 16px}.close-art{width:34px;height:34px;font-size:28px;flex-shrink:0}.art-figure{margin:0;width:min(94vw,calc((100svh - 200px)*1.32452));display:flex;flex-direction:column;align-items:center;gap:3px;animation:art-expand .55s cubic-bezier(.2,.7,.3,1) both}.art-viewport{width:100%;aspect-ratio:1102/832;position:relative;overflow:hidden;touch-action:none;user-select:none}.art-zoom-surface{width:100%;height:100%;transform-origin:center;will-change:transform}.art-crop{width:100%;height:100%;position:relative;overflow:hidden}.art-modal .art-crop img{position:absolute;display:block;width:174.2287%;height:129.8077%;max-height:none;max-width:none;left:-37.1143%;top:-14.9038%;object-fit:fill;animation:none;pointer-events:none}.art-credit{display:block;font:18px/1.2 Indie Flower,cursive;text-align:center;color:#633b50;text-decoration:none;animation:none}.art-credit:hover{text-decoration:underline}.art-modal.closing .art-figure{animation:art-collapse .45s ease-in both}.art-modal.closing .art-crop img{animation:none}.art-modal.closing .zoom-controls{opacity:0}.art-viewport.zoomed{cursor:grab}.art-viewport.dragging{cursor:grabbing}.zoom-controls{display:flex;align-items:center;justify-content:center;gap:9px;padding:5px 12px;border:1px solid #dba3b7;border-radius:999px;background:#fff0f6e8;flex-shrink:0}.zoom-controls button{width:28px;height:28px;border:0;border-radius:50%;background:#f2d1e0;cursor:pointer;font:22px/1 system-ui,sans-serif}.zoom-controls button:disabled{opacity:.4;cursor:default}.zoom-controls input{width:clamp(70px,15vw,170px);accent-color:#a95e85;cursor:pointer}.zoom-controls output{font:16px/1 Indie Flower,cursive;min-width:39px;text-align:center}.art-modal>.download-link{padding:6px 22px;font-size:19px;flex-shrink:0}
@media(max-width:500px){.art-modal{padding:10px 8px}.art-figure{width:min(96vw,calc((100svh - 200px)*1.32452))}.art-credit{font-size:16px}.zoom-controls{gap:7px}}
@media(prefers-reduced-motion:reduce){.art-figure,.art-modal.closing .art-figure,.clock-echo,.eyes-echo{animation-duration:.01ms!important}}
/* Keep the artwork at its approved size while pairing the controls. */
.art-header,.art-actions{width:min(94vw,calc((100svh - 200px)*1.32452));display:flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0}.art-header .art-credit{font-size:18px}.art-actions .download-link{padding:6px 20px;font-size:19px;white-space:nowrap;flex-shrink:0}.art-modal.closing .art-header,.art-modal.closing .art-actions{opacity:0}
@media(max-width:500px){.art-header,.art-actions{width:min(96vw,calc((100svh - 200px)*1.32452));gap:8px}.art-header .art-credit{font-size:16px}.art-actions .zoom-controls{gap:5px;padding:5px 8px;min-width:0}.art-actions .zoom-controls button{width:24px;height:26px;font-size:20px;flex-shrink:0}.art-actions .zoom-controls input{width:clamp(36px,12vw,70px);min-width:0}.art-actions .zoom-controls output{min-width:32px;font-size:14px}.art-actions .download-link{padding:7px 13px;font-size:17px}}

/* Navigation remains outside the transparent gift canvases. */
.gift-stage{touch-action:pan-y;user-select:none}
.gift-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:12;width:48px;height:48px;border:1px solid #dba3b7;border-radius:50%;background:#fff0f6e8;color:#743d58;font:36px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 15px #a96c8020}
.gift-prev{left:max(20px,calc(50% - 440px))}.gift-next{right:max(20px,calc(50% - 440px))}
.gift-arrow:hover{background:#f2d1e0}
.art-composition>.final-preview{border:4px solid #fff5fa;border-radius:6px;box-shadow:0 8px 28px #743d5833;background:#fff5fa}
.art-viewport{border:4px solid #fff5fa;border-radius:6px;box-shadow:0 8px 28px #743d5833}
.art-page-actions{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 12px}
.art-page-actions .art-home{position:static;transform:none}
.art-page-actions .art-home:hover{transform:scale(1.045)}
.gift-carousel{position:relative;width:100%;display:grid;place-items:center}
.gift-arrow{display:grid;place-items:center;padding:0;top:46%}
.gift-arrow svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gift-slide .gift-final{position:absolute;width:50%;height:76%;left:25%;top:7%;object-fit:contain;transform:rotate(-5deg)}
.gift-slide:hover .gift-final,.gift-slide:focus-visible .gift-final{transform:rotate(-5deg) scale(1.045)}
.art-composition>.final-preview{left:45%;top:18%;width:49%;height:64%;object-fit:contain;transform:rotate(4deg)}
.art-modal .art-crop img{width:100%;height:100%;left:0;top:0;object-fit:contain}
.art-viewport{aspect-ratio:2219/1668}
.clock-effects,.eyes-effects{position:fixed;inset:0;width:auto;height:auto;pointer-events:none;overflow:hidden}
.eyes-echo{position:absolute;bottom:auto;right:auto;font:38px/1.2 system-ui,sans-serif;animation:clock-flash 1s ease-in-out both}

@media(max-width:700px) and (orientation:portrait){
 .scene{min-height:100svh}
 .home-page{display:flex;align-items:center;justify-content:center}
 .composition{width:140vw;max-width:none;flex:none;aspect-ratio:16/9}
 .timer-position{left:50%;width:44%;top:46.5%}
 .countdown{gap:.8cqw}.unit{min-width:7.3cqw}.unit>span{font-size:6cqw}.unit small{font-size:2.1cqw}.separator{font-size:4.8cqw}
 .birthday{font-size:2.5cqw;padding:1cqw 1.8cqw;margin-top:2cqw;min-height:44px;white-space:nowrap}
 .sound-control,.test-control{width:44px;height:44px}
 .gift-stage{width:156vw;max-width:none;flex:none}
 .gift-arrow{width:44px;height:44px}.gift-prev{left:12px}.gift-next{right:12px}
 .dots{margin-top:12px;gap:24px}.dot{width:14px;height:14px}
 .video-content{width:92vw;padding:80px 0;gap:28px}.video-pending{inset:0;font-size:22px;text-align:center;padding:20px}
 .art-page{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 0 30px;gap:28px}
 .art-composition{width:100vw;height:112vw;max-height:none;aspect-ratio:auto;transform:none;flex:none}
 .art-composition:has(.art-hit:hover),.art-composition:has(.art-hit:focus-visible){transform:none}
 .message-layer{width:220vw;height:123.75vw;left:-1.7vw;top:-38vw;transform-origin:23.5% 47.3%}
 .message-layer>.layer-image{width:100%;height:100%;aspect-ratio:16/9}
 .message-hit{left:9.2%;top:37.2%;width:28.7%;height:20.1%}
 .art-composition>.layer-image{width:180vw;height:101.25vw;max-width:none;left:-75vw;top:24vw;aspect-ratio:16/9}
 .art-composition>.final-preview{width:90vw;height:auto;aspect-ratio:2219/1668;left:5vw;top:38vw;transform:rotate(4deg)}
 .art-hit{left:5%;top:38vw;width:90%;height:72vw;transform:none}
 .art-home{position:static;transform:none;margin:0}.art-home:hover{transform:scale(1.045)}
 .art-page-actions{position:static;flex:none;gap:12px}.art-page-actions .download-link{min-height:44px}
 .art-actions{flex-wrap:wrap}.art-header .close-art{width:44px;height:44px}
 .art-actions .zoom-controls{min-height:44px}.art-actions .download-link{min-height:44px}
}