/* Interaction refinements. All artwork still comes from the supplied PNGs. */
.home-gift{isolation:isolate}
.home-gift .tag{z-index:0;top:calc(620 * var(--design-unit));left:calc(530 * var(--design-unit))}
.home-gift.depart{animation:none}
.home-gift.depart .tag{animation:tag-scatter .7s ease-in-out both}
.home-gift.depart .home-box{animation:box-scatter .7s ease-in-out both}
.home-gift.depart .home-rosette{animation:flower-scatter .7s ease-in-out both}
@keyframes tag-scatter{35%{translate:calc(20 * var(--design-unit)) calc(25 * var(--design-unit));rotate:4deg}70%{rotate:-2deg}100%{translate:calc(30 * var(--design-unit)) calc(30 * var(--design-unit));rotate:2deg}}
@keyframes box-scatter{35%{translate:calc(-12 * var(--design-unit)) calc(-8 * var(--design-unit));rotate:-2deg}70%{rotate:1deg}100%{translate:calc(-18 * var(--design-unit)) calc(-10 * var(--design-unit));rotate:-1deg}}
@keyframes flower-scatter{35%{translate:calc(-30 * var(--design-unit)) calc(-32 * var(--design-unit));rotate:-5deg}70%{rotate:2deg}100%{translate:calc(-35 * var(--design-unit)) calc(-38 * var(--design-unit));rotate:-2deg}}
.step-1.is-packing .gift-slots{animation:none;visibility:visible}
.step-1.is-packing .slot{animation:gift-drop .7s cubic-bezier(.3,.1,.4,1) both}
.step-1.is-packing .slot-0{--fall:30dvh}
.step-1.is-packing .slot-1{--fall:27dvh;animation-delay:.08s}
.step-1.is-packing .slot-2{--fall:14dvh;animation-delay:.16s}
.step-1.is-packing .slot .container{opacity:1}
.step-1.is-packing .gift-name{opacity:0}
.step-1.is-packing .pack{opacity:0}
@keyframes gift-drop{35%{opacity:1;translate:0 3dvh}100%{opacity:0;translate:0 var(--fall,25dvh);scale:.65}}
.step-1.is-packing .inner-preview{animation:none;top:16.5%;height:48%;transition:top .85s cubic-bezier(.2,.7,.2,1),height .85s ease}
.inner-preview #inner-fill{position:absolute;inset:0;animation:box-fill .85s ease both}
@keyframes box-fill{0%,25%{opacity:0;clip-path:inset(100% 0 0)}100%{opacity:1;clip-path:inset(0)}}
.step-2 .letter-paper{padding:0;border:0;background:none;text-align:left;cursor:pointer}
.step-2 .letter-paper:disabled{opacity:1}
.step-2 .letter-copy{pointer-events:none}
.step-2 .envelope{z-index:auto}
.step-2 .envelope img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.step-2 .envelope-back{z-index:1}
.step-2 .envelope-front,.step-2 .envelope-closed{z-index:3}
.step-2 .envelope .envelope-closed{display:none}
.step-2 .letter-scene.sealed .envelope-back,.step-2 .letter-scene.sealed .envelope-front{display:none}
.step-2 .letter-scene.sealed .envelope-closed{display:block}
.step-2 .folded-letter{position:absolute;left:23%;top:49%;width:53%;height:21%;object-fit:contain;z-index:2;opacity:0;pointer-events:none}
.step-2 .tucking .letter-paper{animation:paper-fold .3s ease both}
.step-2 .tucking .folded-letter{animation:fold-and-tuck .9s ease both}
.step-2 .tucking .envelope-front{z-index:3}
@keyframes paper-fold{to{opacity:0;transform:translateY(8dvh) rotate(2deg) scaleY(.5)}}
@keyframes fold-and-tuck{0%,20%{opacity:0;translate:0 -15dvh}35%{opacity:1;translate:0 -10dvh}75%{opacity:1;translate:0 1dvh;scale:.8}100%{opacity:0;translate:0 8dvh;scale:.7}}
.step-2 .sealing .envelope-closed{display:block;animation:envelope-close .4s ease both}
.step-2 .sealing .heart{animation:seal-heart .65s ease both}
@keyframes envelope-close{from{opacity:0;transform:scaleY(.65);transform-origin:center bottom}to{opacity:1;transform:scaleY(1)}}
@keyframes seal-heart{to{left:45%;top:66%;width:17%;height:9%;rotate:-5deg}}
dialog select{display:block;width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid #caabc3;border-radius:10px;background:white;color:#4c4050;margin-top:8px}
.step-3 .paper-stack{position:relative;display:block;height:76%;width:100%}
.step-3 .paper-stack img{position:absolute;left:6%;top:10%;width:82%;height:82%;object-fit:cover;box-shadow:1px 3px 7px #0002;rotate:8deg}
.step-3 .paper-stack img+img{left:0;top:3%;rotate:-3deg}
/* Missing standalone tool PNGs: show the exact tool region of the supplied UI,
   rather than substituting/recoloring the unrelated pink spool. */
.step-3 .categories span.tool-art{position:absolute;display:block;left:8%;top:10%;width:84%;height:auto;aspect-ratio:205/200;background-image:url('/ui/03包装礼盒.jpg');background-size:575.122% auto;background-repeat:no-repeat}
.step-3 .categories .tool-paper{background-position:6.674% 5.684%}
.step-3 .categories .tool-ribbon1{background-position:6.674% 26.579%}
.step-3 .categories .tool-art+span{position:absolute;left:0;bottom:6%;width:100%}
.step-3 .categories button>img{transform:scale(1.2);transform-origin:center center}
.chat-intro .bubble{animation:message-in .45s cubic-bezier(.2,.8,.3,1) both}
.chat-intro .bubble:nth-child(2){animation-delay:.35s}
.chat-intro .bubble:nth-child(3){animation-delay:.7s}
.chat-intro .bubble:nth-child(4){animation-delay:1.05s}
@keyframes message-in{from{opacity:0;translate:12px 10px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.step-3 .demo .track{animation:swipe-demo 1.2s 1.55s ease-in-out}
.carousel .track{will-change:transform}
.page:is(.step-3,.step-4) .material{transition:width .25s,height .25s,border-color .25s}
.page:is(.step-3,.step-4) .material .no-decoration{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:#fff;font-size:calc(34 * var(--ui));color:#777}
.step-4 .rosette-work #rosette-background{inset:0;width:100%;height:100%;object-fit:fill}
.step-4 .rosette-work #rosette-preview{left:30.5%;top:max(2%,calc(25dvh - 31vw));width:68%;height:79%;z-index:6;pointer-events:none}
.step-4 .rosette-layers canvas{object-position:center top}
.step-4 .material span.flower-thumbnail{display:block;position:absolute;inset:4%;overflow:hidden}
.step-4 .material .flower-thumbnail img{position:absolute;max-width:none;object-fit:fill}
.step-4 .bloom-parts{background:none;border-radius:0}
.bloom-surface{position:absolute;left:0;top:-58%;width:100%;height:158%;filter:drop-shadow(0 -3px 7px #6c65552c);pointer-events:none}
.bloom-sheet{position:absolute;inset:0;background:linear-gradient(#fffef0ec,#fffef0e0),url('/assets/04/中性灰无缝细纸纹理-2.png') center/cover;mask-image:radial-gradient(ellipse 100% 80% at 100% 0,transparent 99.7%,#000 100%);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 100% 0,transparent 99.7%,#000 100%)}
.step-4 .bloom-parts h2,.step-4 .part-buttons,.step-4 .bloom-parts p{z-index:1}
.step-4 .part-buttons{position:absolute;inset:0}
@media(prefers-reduced-motion:reduce){.carousel .track{transition:none!important}.home-gift.depart img,.is-packing .slot,.inner-preview #inner-fill,.letter-scene img,.letter-scene button{animation:none!important;transition:none!important}}

/* Evening pass: continuous carousel motion and the revised envelope canvas. */
.step-1 .slot{--gift-glow:#f4a9e9}
.step-1 .slot-1{--gift-glow:#b5a4ff}
.step-1 .slot-2{--gift-glow:#ffdc74}
.step-1 .slot .container{filter:drop-shadow(0 0 calc(9 * var(--ui)) white) drop-shadow(0 0 calc(30 * var(--ui)) var(--gift-glow)) drop-shadow(0 0 calc(48 * var(--ui)) var(--gift-glow))}
.step-1 .slot.has-name .container{opacity:1}
.step-1 .slot.has-name .gift-name{top:102%;max-height:2.5em;font-size:calc(45 * var(--ui));pointer-events:none}
.step-2 .envelope-assembly{position:absolute;left:10%;top:49%;width:68%;height:auto;aspect-ratio:1094/1033;transition:left .65s ease,top .65s ease,width .65s ease}
.step-2 .envelope-assembly .envelope{position:absolute;inset:0;width:100%;height:100%;margin:0}
.step-2 .envelope-assembly .folded-letter{inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translate(4%,-10%) scale(.9)}
.step-2 .letter-scene:is(.tucking,.tucked,.sealing,.sealed) .envelope-assembly{left:12%;top:calc(50% - 35.88vw);width:76%}
.step-2 .letter-scene.tucked .folded-letter,.step-2 .letter-scene.sealing .folded-letter{opacity:1}
.step-2 .letter-scene.sealed .folded-letter{opacity:0}
.step-2 .letter-scene:is(.tucked,.sealing,.sealed) .pen{opacity:0;visibility:hidden}
.step-2 .tucking .letter-paper{animation:paper-fold .38s ease both}
.step-2 .tucking .folded-letter{animation:fold-and-tuck 1.25s cubic-bezier(.22,.65,.25,1) both}
.step-2 .tucking .pen{animation:pen-away .65s ease both}
@keyframes fold-and-tuck{0%,22%{opacity:0;transform:translate(4%,-65%) scale(.9)}38%{opacity:1;transform:translate(4%,-45%) scale(.9)}100%{opacity:1;transform:translate(4%,-10%) scale(.9)}}
@keyframes pen-away{to{translate:48vw -8dvh;rotate:18deg;opacity:0}}
.step-2 .sealing .envelope-closed{animation:envelope-close .5s ease both}
.step-2 .sealing .heart{animation:seal-heart .8s cubic-bezier(.22,.65,.25,1) both}
.step-2 .heart.attached{left:42.4%;top:calc(45.5% + 14.83vw);width:17%;height:9%;rotate:-5deg}
@keyframes seal-heart{to{left:42.4%;top:calc(45.5% + 14.83vw);width:17%;height:9%;rotate:-5deg}}
.step-2 .open-letter{left:50%;top:78.5%;transform:translateX(-50%);white-space:nowrap}
.step-2 .unseal-zone{left:15%;top:calc(50% - 22vw);width:70%;height:44vw}
.step-2 .letter-enter.open .letter-paper{animation:prop-enter .8s ease both}
.step-2 .letter-enter.open .envelope-assembly{animation:prop-enter .8s .12s ease both}
.step-2 .letter-enter.open .pen{animation:prop-enter .8s .24s ease both}
.step-2 .letter-enter.open .heart{animation:prop-enter .8s .36s ease both}
@keyframes prop-enter{from{opacity:0;translate:0 3dvh;rotate:-2deg}70%{translate:0 -.5dvh}to{opacity:1;translate:0 0;rotate:0deg}}
.step-2 .letter-scene button.prop-selected{animation:prop-pick .35s ease both}
.step-2 .letter-scene button:active{scale:1.025}
@keyframes prop-pick{35%{scale:1.035;rotate:-1deg}70%{rotate:1deg}to{scale:1;rotate:0deg}}
.chat-intro .bubble{animation-duration:.65s}
.chat-intro .bubble:nth-child(2){animation-delay:.65s}
.chat-intro .bubble:nth-child(3){animation-delay:1.3s}
.chat-intro .bubble:nth-child(4){animation-delay:1.95s}
.step-3 .demo .track{animation-delay:2.75s}
.page:is(.step-3,.step-4) .track{position:relative;display:block;--card-pitch:calc(286 * var(--ui))}
.page:is(.step-3,.step-4) .material,.page:is(.step-3,.step-4) .material.selected{position:absolute;left:calc(50% + var(--offset,0) * var(--card-pitch));top:50%;width:calc(252 * var(--ui));height:calc(252 * var(--ui));border-width:calc(6 * var(--ui));transform:translate(-50%,-50%) scale(calc(1 + var(--focus,0) * .15873));transform-origin:center;will-change:transform;transition:transform .22s cubic-bezier(.2,.65,.25,1),border-color .22s}
.step-4 #rosette-preview{filter:drop-shadow(0 calc(9 * var(--ui)) calc(14 * var(--ui)) #51493630)}
@media(prefers-reduced-motion:reduce){.step-2 .envelope-assembly,.step-2 .letter-enter button,.step-2 .letter-enter .envelope-assembly,.chat-intro .bubble{animation:none!important;transition:none!important}.page:is(.step-3,.step-4) .material{transition:none!important}}

/* Photo adjustment contrast and unclipped ornament glow. */
.crop-editor{background:#aa92bb;border-radius:14px;padding:16px;box-shadow:inset 0 2px 8px #59416b22}
.step-1 .slot{overflow:visible}
.step-1 .gift-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 calc(9 * var(--ui)) white) drop-shadow(0 0 calc(30 * var(--ui)) var(--gift-glow)) drop-shadow(0 0 calc(48 * var(--ui)) var(--gift-glow))}
.step-1 .slot .container{display:block;filter:none;overflow:visible}
.step-2 .sealing .heart{animation:seal-heart .6s cubic-bezier(.22,.65,.25,1) both;animation-delay:0s}
.step-2 .sealing .folded-letter{animation:seal-paper .18s ease both}
.step-2 .sealing .envelope-closed{display:block;animation:envelope-close .35s ease both;animation-delay:0s}
@keyframes seal-paper{to{opacity:0}}

@font-face{font-family:KeinannMaruPOP;src:url('./fonts/KeinannMaruPOP.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Bookman Old Style';src:url('./fonts/Bookman-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Bookman Old Style';src:url('./fonts/Bookman-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Bookman Old Style';src:url('./fonts/Bookman-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Bookman Old Style';src:url('./fonts/Bookman-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
.gift-dialog{background:linear-gradient(155deg,#fff5fd 0%,#f2e7f1 52%,#e7deeb 100%)}
.gift-dialog .crop-editor{background:none;box-shadow:none;border-radius:0;padding:0;margin:28px auto 24px;width:min(230px,90%)}
.gift-dialog .crop-editor canvas{filter:drop-shadow(0 3px 4px #4d3b4c40)}
.step-1 .pack,.step-1 .looks,.step-1 .gift-prompt{font-family:KeinannMaruPOP,'HarmonyOS Sans SC',sans-serif}
/* Remove both open-envelope layers as soon as the closed flap takes over. */
.step-2 .sealing .envelope-back,.step-2 .sealing .envelope-front{animation:none;opacity:0;visibility:hidden}
.step-2 .sealing .envelope-closed{animation:closed-envelope-settle .35s ease both}
@keyframes closed-envelope-settle{from{transform:scaleY(.96);transform-origin:center bottom}to{transform:scaleY(1)}}
.step-5{height:100dvh;min-height:0;overflow:hidden;--ui:min(calc(100vw / 1179),calc(100dvh / 2100))}
.step-5 main{height:100%;overflow:hidden}
.step-5 .nav{top:1.5%;width:21.3vw;height:auto;aspect-ratio:251/115}
.step-5 .nav.back{left:5vw}
.step-5 .nav.restart{right:6.2vw;background:#ed87e6;color:#fff;border:calc(5 * var(--ui)) solid white;outline:calc(5 * var(--ui)) solid #ed87e6;border-radius:calc(44 * var(--ui));font-family:KeinannMaruPOP,sans-serif;font-size:calc(58 * var(--ui));font-weight:400;padding:0}
.step-5 .finish-logo{position:absolute;left:19%;top:6%;width:62%;height:34%;object-fit:contain}
.step-5 #finished{position:absolute;left:10.5%;top:31.6%;width:79%;height:auto;margin:0;object-fit:contain;filter:drop-shadow(0 calc(9 * var(--ui)) calc(7 * var(--ui)) #544c392b)}
.step-5 .dedication{position:absolute;left:5%;top:73%;width:90%;gap:1.1dvh;color:#651e17;font-family:'Bookman Old Style',serif;line-height:1.15}
.step-5 .dedication strong,.step-5 .dedication span{font-size:calc(64 * var(--ui));font-weight:400;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.step-5 .dedication small{font-size:calc(47 * var(--ui));margin-top:1.3dvh}
.step-5 .finish-actions{position:absolute;left:14%;top:90.5%;width:79%;height:5.7%;margin:0;gap:3%;font-family:KeinannMaruPOP,sans-serif;font-size:calc(56 * var(--ui))}
.step-5 .finish-actions button{height:100%;padding:0 2%;border:0;border-radius:calc(32 * var(--ui));background:#ff9cda;color:white;white-space:nowrap;font:inherit;flex:1}

.gift-dialog #gift-form{scroll-margin-bottom:90px}.gift-dialog .dialog-actions{position:sticky;bottom:-24px;padding:14px 0 18px;background:linear-gradient(transparent,#e7deeb 25%);z-index:2}.gift-dialog{max-height:min(88dvh,calc(var(--gift-visible-height,100dvh) - 24px))}

/* Save directly into selectable, independently generated previews. */
.export-dialog{padding:20px;max-height:90dvh}.export-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.export-preview{min-width:0;border:1px solid #dfbad4;border-radius:12px;padding:10px;background:#fffafd}.export-preview label{margin:0;cursor:pointer;line-height:1.4}.export-preview input{width:19px;height:19px;accent-color:#d45dab;vertical-align:middle;margin-right:5px}.export-preview:has(input:checked){border-color:#c565a9;box-shadow:0 0 0 1px #c565a9}.preview-image{display:flex;align-items:center;justify-content:center;height:160px;margin-top:10px;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0/14px 14px;border-radius:6px;overflow:hidden;font-size:13px}.preview-image img{width:100%;height:100%;object-fit:contain}.export-preview a{font-size:12px;display:inline-block;margin-top:8px;color:#92526e}.export-preview a[hidden]{display:none}.preview-status{font-size:12px;margin:5px 0!important}.preview-status:empty{display:none}.export-dialog .dialog-actions{position:sticky;bottom:-20px;background:#fff9fe;padding:12px 0;z-index:2}.export-dialog #export-go{padding:12px 20px}.export-dialog #export-progress{font-size:13px}

.export-preview-grid[hidden],#export-viewer[hidden]{display:none}.export-preview h3{font-size:14px;font-weight:400;margin:0;line-height:1.4}.export-preview .preview-image{width:100%;padding:0;border:0}.export-preview.current{border-color:#c565a9}.export-dialog .dialog-actions{justify-content:space-between;align-items:center}.export-dialog #export-current{padding:10px 20px;background:#e9c3de;color:#574750;text-decoration:none;border-radius:10px;font-size:16px}.export-dialog #export-current[aria-disabled=true]{opacity:.45;cursor:wait}#export-viewer-image{display:block;width:100%;height:auto;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0/14px 14px}#export-viewer p,.export-help{font-size:13px}

/* Stacked export document, with a native swipe gallery. */
.export-preview-grid{display:block}.export-preview{border:0;border-bottom:1px solid #dfbad4;border-radius:0;background:none;padding:18px 0;margin:0}.export-preview h3{font-size:17px;margin-bottom:12px}.export-preview.current{border-color:#dfbad4}.export-preview .preview-image{height:300px;margin:0 auto 10px;max-width:100%}.export-preview a{font-size:15px;text-decoration:underline}.export-zip{padding:24px 0;text-align:center}.export-zip button{padding:12px 18px;background:#e9c3de;border-radius:10px;font-size:16px}.export-zip p{font-size:13px}#zip-file[hidden],#export-current[hidden]{display:none}#zip-file{color:#92526e}#export-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;width:100%}#export-slides::-webkit-scrollbar{display:none}.export-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;height:58dvh}.export-slide img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0/14px 14px}#export-page{text-align:center;font-size:14px}

/* Familiar document links, including visited download feedback. */
.export-dialog a[download],.export-dialog #export-current,.export-dialog #export-zip{color:#0000ee;text-decoration:underline;background:none;border:0;border-radius:0;font:inherit;cursor:pointer}.export-dialog a[download]:visited,.export-dialog a[download].downloaded,.export-dialog #export-zip.downloaded{color:#551a8b}.export-dialog #export-current{padding:10px 0}.export-dialog #export-zip{padding:0}.export-dialog a[download]:active{color:#ff0000}.step-5 .dedication{font-family:'Bookman Old Style','HarmonyOS Sans SC',serif}
.export-dialog #export-current:visited,.export-dialog #export-current.downloaded{color:#551a8b}

/* Latest home count and supplied gallery boxes. */
.home-gift-count{position:absolute;top:calc(1280 * var(--design-unit));width:100%;text-align:center;font:italic calc(54 * var(--design-unit)) 'Bookman Old Style',serif;color:#a35958;text-shadow:0 0 calc(35 * var(--design-unit)) #c6ffe8}.step-0 .home-gift{top:calc(1250 * var(--design-unit))}.step-0 .home-gift .tag{top:calc(620 * var(--design-unit))}.step-0 .gallery-entry{margin-top:calc(2143 * var(--design-unit))}.gallery-entry .made-count{color:#651e17;font-weight:700;background:#fffca5}.gallery-entry>.home-gallery-gifts{height:calc(335 * var(--design-unit));display:flex;align-items:flex-start;justify-content:space-around;background:#ffe2f7;overflow:hidden;padding:0 calc(30 * var(--design-unit))}.gallery-entry>.home-gallery-gifts>img{position:static;width:31%;height:calc(390 * var(--design-unit));margin:0;object-fit:contain}.step-5 .gallery-entry{display:none}
.gallery-page{--design-unit:calc(100vw / 1179);padding:0;background:linear-gradient(90deg,#fffce5 0 3.8%,#dcf7fc 3.8% 17.2%,#fffce5 17.2% 30.5%,#ffe9f6 30.5% 43.8%,#fffce5 43.8% 57.1%,#eee7fd 57.1% 70.4%,#fffce5 70.4% 83.7%,#ddfce5 83.7% 97%,#fffce5 97%);min-height:max(100dvh,calc(2556 * var(--design-unit)));width:100%}.gallery-page header{position:absolute;margin:0;inset:0}.gallery-page main{padding-top:calc(210 * var(--design-unit));padding-bottom:calc(200 * var(--design-unit))}.gallery-logo{display:block;width:66%;height:auto;margin:0 auto calc(105 * var(--design-unit))}.gallery-heading{display:flex;align-items:center;justify-content:space-between;padding:0 calc(75 * var(--design-unit));gap:calc(30 * var(--design-unit))}.gallery-heading img{width:47%;height:auto}.gallery-heading>span{background:#f8b0ed;color:#651e17;border-radius:calc(30 * var(--design-unit));padding:calc(8 * var(--design-unit)) calc(58 * var(--design-unit));font:700 calc(58 * var(--design-unit)) 'Bookman Old Style',serif;white-space:nowrap}.gallery-tools{display:flex;align-items:center;justify-content:space-between;margin:calc(85 * var(--design-unit)) calc(72 * var(--design-unit)) calc(45 * var(--design-unit));gap:calc(35 * var(--design-unit))}.gallery-tools label{width:56%}.gallery-tools input{width:100%;border:0;border-radius:calc(20 * var(--design-unit));background:linear-gradient(white,#f4f4f4);box-shadow:0 calc(5 * var(--design-unit)) calc(5 * var(--design-unit)) #9995;font-size:calc(40 * var(--design-unit));padding:calc(15 * var(--design-unit)) calc(20 * var(--design-unit));min-width:0}.gallery-tools button{font-size:calc(42 * var(--design-unit));color:#858585;background:none;padding:0}.gallery-service{font-size:calc(21 * var(--design-unit));color:#766b70;text-align:center;margin:0 calc(50 * var(--design-unit)) calc(32 * var(--design-unit))}#gallery-pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(105 * var(--design-unit)) calc(55 * var(--design-unit));padding:calc(15 * var(--design-unit)) calc(60 * var(--design-unit))}.gallery-card{display:block;min-width:0;padding:0;background:none;transform:translateY(calc(var(--nudge) * var(--design-unit)))}.gallery-number{display:block;text-align:left;font-size:calc(35 * var(--design-unit));font-weight:700;color:#777}.gallery-art{position:relative;display:block;height:calc(265 * var(--design-unit));overflow:visible;rotate:var(--tilt)}.gallery-art img{position:absolute;width:115%;height:auto;left:-7.5%;top:calc(-70 * var(--design-unit));pointer-events:none}.gallery-name{display:block;font-size:calc(34 * var(--design-unit));color:#9a443a;overflow-wrap:anywhere;margin-top:calc(10 * var(--design-unit))}.gallery-empty{grid-column:1/-1;text-align:center}.gallery-full-letter{width:100%;height:auto;display:block}.submission-box{display:block;width:100%;max-height:260px;object-fit:contain}.submission-letter{display:block;width:100%;height:auto}#submission-preview{font-size:14px}
/* Fixed navigation for the Gallery and long image detail. */
.gallery-page>header{position:fixed;inset:0 0 auto;height:calc(175 * var(--design-unit));z-index:30}.gallery-page>header .back{filter:drop-shadow(0 2px 3px #fff9)}#gallery-list[hidden],#gallery-detail[hidden]{display:none}#gallery-detail{padding:0 calc(35 * var(--design-unit)) calc(80 * var(--design-unit))}#gallery-detail h1{font-size:calc(44 * var(--design-unit));font-weight:400;margin:0 0 calc(40 * var(--design-unit));overflow-wrap:anywhere}.gallery-full-letter{display:block;width:100%;height:auto}
/* The unfolded artwork itself fills the detail viewport, without another backdrop. */
.gallery-page.gallery-detail-open{background:#fff}.gallery-page.gallery-detail-open main{padding:0}.gallery-page #gallery-detail{padding:0}.gallery-page #gallery-detail .gallery-full-letter{display:block;width:100%;max-width:none;height:auto;margin:0}
/* Gift naming: scroll only enough to reveal the field; keep actions neutral. */
.gift-dialog{overflow-anchor:none;scroll-behavior:auto}.gift-dialog .dialog-actions button{appearance:none;-webkit-appearance:none;padding:10px 14px;border:0;border-radius:10px;background:#e6d8e3;color:#574750;-webkit-tap-highlight-color:transparent;user-select:none}.gift-dialog .dialog-actions button.primary{background:#e9c3de;color:#574750}.gift-dialog .dialog-actions button:active{background:#dbb5d0}.gift-dialog .dialog-actions button:focus-visible{outline:2px solid #a16591;outline-offset:3px}
/* Keep the complete finish composition, then reveal the same Gallery entry below. */
.step-5{height:auto;min-height:100dvh;overflow:visible}.step-5 main{height:auto;overflow:visible}.step-5 .finish-scene{position:relative;height:100dvh}.step-5>header{height:100dvh}.step-5 .gallery-entry{display:flow-root;margin:0}
/* Site language stays compact and clear of the supplied home artwork. */
.home-language{position:absolute;z-index:12;left:5%;top:calc(180 * var(--design-unit));display:flex;gap:6px;align-items:center;color:#92526e;font-size:clamp(12px,calc(36 * var(--design-unit)),16px)}.home-language select{font:inherit;color:inherit;border:1px solid #dfbad4;border-radius:9px;background:#fff9fe;padding:5px 7px}.final-save-settings{position:relative;padding:20px 7%;background:#fff9fee6;font-size:14px;line-height:1.6;color:#685466}.anonymous-consent{display:flex;gap:10px;align-items:flex-start}.anonymous-consent input{width:20px;height:20px;flex:0 0 auto;accent-color:#bc79a9;margin-top:2px}.archive-privacy{font-size:12px;margin:12px 0}.gift-box-name{display:block;font-size:13px}.gift-box-name input{display:block;width:100%;font:inherit;padding:9px;border:1px solid #dfbad4;border-radius:8px;background:#fff;margin:6px 0 10px}.final-number{margin-bottom:10px}#archive-status{font-size:12px;color:#85506f}.submission-privacy{font-size:13px}
.home-language{top:calc(60 * var(--design-unit))}
/* 04: reference contour starts at 30dvh and reaches the picker at 80.5dvh. */
.step-4 .bloom-surface{top:-46.376812%;height:146.376812%;filter:none;overflow:visible}.step-4 .bloom-sheet{display:none}
/* 05: move only the gift a little; keep the authored finish composition. */
.step-5 #finished{top:33%}.step-5 .final-save-settings{background:none;padding:0 14% 22px;font-size:clamp(12px,calc(39 * var(--ui)),16px);line-height:1.55}.step-5 .anonymous-consent{gap:9px;align-items:flex-start}.step-5 .anonymous-consent input{width:19px;height:19px;margin:2px 0 0;border-radius:5px}.step-5 .gallery-archive-note{font-size:12px}

/* Supplied full-canvas Bloom panel: alpha and inner shadow are baked into PNG. */
.step-4 .bloom-surface{top:-133.333333%;height:289.855072%;width:100%;object-fit:fill;opacity:1;filter:none;pointer-events:none}