#entrance{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden;background:transparent;color:var(--tone-f2e7fa,#f2e7fa);perspective:1000px}
.entrance-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--tone-ead7ff99,#ead7ff99) 1px,transparent 1.7px),radial-gradient(circle,var(--tone-bf95f257,#bf95f257) .7px,transparent 1.5px);background-size:113px 173px,79px 137px;background-position:21px 13px,55px 67px;mask-image:radial-gradient(ellipse,#000,transparent 80%);opacity:.6}
.portal-scene{position:relative;width:min(780px,100vw,calc((100dvh - 250px) * 1.1013));aspect-ratio:1316/1195;flex-shrink:0;transform-origin:50% 46%;perspective:1100px;isolation:isolate}
.gate-guide{position:absolute;width:clamp(100px,34%,220px);bottom:6%;left:50%;transform:translateX(-50%);z-index:4}
.guide-avatar{position:relative;width:100%;aspect-ratio:1161/1355;transform-style:preserve-3d;transform-origin:50% 96%}
.guide-front,.guide-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}
.guide-back{transform:rotateY(180deg)}
.guide-front,.guide-back{filter:drop-shadow(0 0 4px #ffc8b566)}
.guide-front img,.guide-back img{position:absolute;inset:0;width:100%;height:100%}
.guide-speaking-mouth{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .1s ease}
@media(prefers-reduced-motion:reduce){.guide-speaking-mouth{transition:none}}
.guide-shadow{position:absolute;bottom:1.5%;left:31%;width:36%;height:3%;border-radius:50%;background:radial-gradient(ellipse,var(--tone-140a2680,#140a2680),transparent 72%);pointer-events:none}
/* Keep the skirt above the hip joints so independent steps never expose a seam. */
.guide-front-body{position:absolute;inset:0;clip-path:inset(0 0 23% 0);transform-origin:50% 76%}
.front-leg-left{clip-path:polygon(0 74%,54% 74%,47% 100%,0 100%);transform-origin:46% 76%}
.front-leg-right{clip-path:polygon(54% 74%,100% 74%,100% 100%,47% 100%);transform-origin:57% 76%}
.back-leg-left{clip-path:polygon(0 74%,50% 74%,50% 100%,0 100%);transform-origin:44% 76%}
.back-leg-right{clip-path:polygon(50% 74%,100% 74%,100% 100%,50% 100%);transform-origin:56% 76%}
/* Separate the supplied rear pose at its shoulders; rotate only the arms. */
.guide-arm-left{clip-path:polygon(0 39%,19% 39%,23% 43.5%,39.5% 45.5%,39.5% 55.5%,0 57%);transform-origin:39% 49%}
.guide-arm-right{clip-path:polygon(100% 39%,81% 39%,77% 43.5%,60.5% 45.5%,60.5% 55.5%,100% 57%);transform-origin:61% 49%}
.guide-back-body{clip-path:polygon(0 0,100% 0,100% 39%,81% 39%,77% 43.5%,60.5% 45.5%,60.5% 55.5%,100% 57%,100% 76%,0 76%,0 57%,39.5% 55.5%,39.5% 45.5%,23% 43.5%,19% 39%,0 39%)}
.guide-name{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff3ee;font:400 13px/1.5 Pacifico,"Segoe UI",cursive;letter-spacing:.25px;text-shadow:0 1px 2px var(--tone-59347799,#59347799)}
.guide-bubble{position:relative;z-index:4;flex-shrink:0;width:min(340px,calc(100vw - 40px));padding:28px 30px 21px;color:var(--tone-68409d,#68409d);font:15px/1.65 Pacifico,"Segoe UI",cursive;text-align:center;pointer-events:auto}
.guide-bubble-art{position:absolute;z-index:-1;top:0;left:0;width:100%;height:calc(100% + 22px);overflow:visible;filter:drop-shadow(0 0 3px var(--tone-fff1ff99,#fff1ff99)) drop-shadow(0 0 16px var(--tone-d798ffb3,#d798ffb3));pointer-events:none}
.guide-bubble p{margin:0}
.gift-configured .guide-bubble p{overflow-wrap:anywhere}
@media(orientation:portrait){.gift-configured .portal-scene{width:min(780px,100vw,calc((100dvh - var(--intro-bubble-height,220px) - 90px) * 1.1013))}.gift-configured .guide-name{max-width:200px;overflow:hidden;text-overflow:ellipsis}}
.entrance-speech-letter{opacity:0;transition:opacity .12s ease}
.entrance-speech-letter.is-spoken{opacity:1}
@media(prefers-reduced-motion:reduce){.entrance-speech-letter{transition:none}}
.guide-bubble .guide-hello{font-size:20px;font-weight:400;letter-spacing:0;margin-bottom:10px;color:var(--tone-582c90,#582c90)}
.guide-hello span{color:var(--tone-65359e,#65359e)}
.guide-confirm{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;min-height:44px;margin:14px auto 0;padding:8px 20px;border:2px solid var(--tone-fff2ff,#fff2ff);border-radius:999px;background:radial-gradient(ellipse at 50% 0,var(--tone-b47af6,#b47af6),transparent 75%),linear-gradient(var(--tone-8954e3,#8954e3),var(--tone-7548dc,#7548dc) 60%,var(--tone-a879ef,#a879ef));color:var(--tone-fffaff,#fffaff);font:700 16px/1.35 "Trebuchet MS","Segoe UI",sans-serif;box-shadow:inset 0 0 9px var(--tone-f8c6ff88,#f8c6ff88),0 0 7px var(--tone-fff0ffcc,#fff0ffcc),0 0 19px var(--tone-d88afaa6,#d88afaa6);cursor:pointer;transition:box-shadow .2s,filter .2s;-webkit-tap-highlight-color:transparent}
.guide-confirm:hover{filter:brightness(1.08);box-shadow:inset 0 0 12px var(--tone-ffddffaa,#ffddffaa),0 0 9px var(--tone-fff0ff,#fff0ff),0 0 24px var(--tone-df9affcc,#df9affcc)}
.guide-confirm:focus-visible{outline:3px solid var(--tone-623491,#623491);outline-offset:5px}
.guide-confirm:disabled{cursor:default;opacity:.75}
@media(max-height:650px){#entrance{gap:25px}.gate-guide{width:110px}.guide-bubble{font-size:13px;padding:25px 28px 19px}.guide-bubble .guide-hello{font-size:19px;margin-bottom:8px}.guide-confirm{font-size:15px;min-height:44px;margin-top:13px}.guide-name{font-size:12px}}
@media(min-width:900px) and (orientation:landscape){#entrance{flex-direction:row;gap:24px;padding:24px}.guide-bubble{width:300px}.portal-scene{width:min(840px,calc(100vw - 372px),calc((100dvh - 64px) * 1.1013))}.gate-guide{width:clamp(130px,32%,220px)}}
@media(min-width:600px) and (max-height:500px){#entrance{flex-direction:row;gap:14px;padding:16px}.guide-bubble{width:260px}.portal-scene{width:min(calc(100vw - 306px),calc((100dvh - 40px) * 1.1013))}.gate-guide{width:32%}}
@media(prefers-reduced-motion:reduce){#portal-code span{animation:none}.portal-door,.gate-guide{transition:none}}

/* The supplied illustration is shared by the fixed frame and both hinged leaves. */
.portal-frame{position:absolute;inset:0;perspective:1100px}
.portal-light{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;overflow:visible;pointer-events:none}
.portal-art-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.portal-art-frame,.portal-door svg{filter:brightness(1.28) saturate(1.12) drop-shadow(0 0 5px #ffcba855)}
.portal-brand{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 7px #ffd39a88)}
.brand-orbit{filter:drop-shadow(0 0 4px #ffce8dcc)}
.portal-door{position:absolute;inset:0;z-index:3;backface-visibility:hidden;transition:transform 1.35s cubic-bezier(.35,.05,.2,1);pointer-events:none}
.portal-door svg{display:block;width:100%;height:100%}
.door-left{transform-origin:27.89% 50%}.door-right{transform-origin:71.35% 50%}
[data-entrance="opening"] .portal-scene{will-change:transform}
[data-entrance="opening"] .portal-art-frame{will-change:transform}
/* Lighting is baked once at source resolution before the push-in. */
.portal-textures-ready :is(.portal-art-frame,.portal-door svg,.guide-front,.guide-back){filter:none}
@media(prefers-reduced-motion:reduce){.portal-door{transition:none}}

.entrance-surround{position:absolute;inset:0;pointer-events:none}
.gate-guide,.portal-door{transition:none}
[data-entrance="opening"] .entrance-surround{will-change:transform}
.gate-guide{pointer-events:none}
.guide-bubble{pointer-events:auto}
.entrance-feedback{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;color:var(--tone-e4c6ee,#e4c6ee);font-size:12px;line-height:1.5;z-index:6}