.mobile-orientation { width:min(1020px,90vw); max-height:90svh; padding:65px 70px; border:2px solid #b4c9dc; border-radius:8px; background:#f7fbff; color:#365b73; text-align:center; box-shadow:0 0 0 9px #f7fbff99,0 0 0 11px #c8adc3; }
.mobile-orientation::backdrop { background:#edf3fbeF; backdrop-filter:blur(7px); }
.mobile-orientation[open] { display:flex; flex-direction:column; align-items:center; gap:30px; }
.orientation-phone { width:260px; height:260px; overflow:visible; fill:#e7f2fb; stroke:#7193ab; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.orientation-device { transform-origin:60px 60px; animation:rotate-device 2.4s ease-in-out 2; }
.orientation-star { fill:#e8c6dd; stroke:#bc7ea6; }
.orientation-arrow { fill:none; stroke:#bc7ea6; stroke-dasharray:3 4; }
.mobile-orientation h2 { font:64px/1.5 "Songti SC",serif; color:#a34b80; }
.mobile-orientation p { font-size:40px; line-height:1.9; }
.orientation-continue { min-height:135px; margin-top:15px; padding:24px 35px; border:0; border-bottom:2px dashed #b992ad; background:none; color:#7c637d; font-size:36px; }
.orientation-continue:focus-visible { outline:4px solid #a34b80; outline-offset:10px; }
@keyframes rotate-device { 0%,15% { transform:rotate(0); } 55%,85% { transform:rotate(90deg); } 100% { transform:rotate(0); } }
@media(prefers-reduced-motion:reduce) { .orientation-device { animation:none; transform:rotate(90deg); } }

/* Keep the two-level composition when mobile browser chrome reduces the height. */
.mobile-desktop body[data-scene="lab"] { position:relative; overflow:auto; }
.mobile-desktop .lab-scene { height:auto; min-height:max(100svh,540px); padding:145px 60px 75px; justify-content:flex-start; }
.mobile-desktop body[data-scene="lab"] .site-header { position:absolute; top:30px; }
.mobile-desktop body[data-scene="lab"] .site-footer { position:absolute; bottom:25px; }
.mobile-desktop body[data-scene="lab"] .page-frame { position:absolute; }
.mobile-desktop .lab-heading { top:88px; }
.mobile-desktop .lab-heading h1 { font-size:24px; margin-top:10px; }
.mobile-desktop .lab-stage { width:min(980px,88vw); height:clamp(340px,calc(100svh - 220px),520px); flex-shrink:0; margin-top:0; }
.mobile-desktop .lab-stage .cauldron { height:95%; top:48%; }
.mobile-desktop .lab-stage .potion { width:clamp(96px,17svh,125px); padding-bottom:30px; }
.mobile-desktop .lab-stage .potion-media { left:14%; right:auto; top:0; bottom:auto; }
.mobile-desktop .lab-stage .potion-brand { right:14%; left:auto; top:0; bottom:auto; }
.mobile-desktop .lab-stage .potion-graphic { left:17%; right:auto; top:auto; bottom:0; }
.mobile-desktop .lab-stage .potion-events { right:17%; left:auto; top:auto; bottom:0; }
.mobile-desktop .potion-name { opacity:1; transform:translate(-50%,0); top:calc(100% - 27px); font-size:14px; }
.mobile-desktop .back-to-book { bottom:54px; }
.mobile-desktop body[data-scene="lab"] .atelier-room { position:absolute; }
.mobile-desktop .atelier-room[data-room="lab"] .stitch-motif { width:105px; }
.mobile-desktop .atelier-room[data-room="lab"] .stitch-hat { left:22px; top:25%; }
.mobile-desktop .atelier-room[data-room="lab"] .stitch-rabbit { left:22px; bottom:21%; }
.mobile-desktop .atelier-room[data-room="lab"] .stitch-bow { right:22px; top:25%; }
.mobile-desktop .atelier-room[data-room="lab"] .stitch-orb { right:22px; bottom:21%; }
.mobile-desktop .atelier-room[data-room="lab"] .stitch-star { display:none; }
@media (orientation:landscape) and (max-height:530px) {
 .mobile-desktop .lab-scene { min-height:max(100svh,414px); padding:108px 60px 42px; }
 .mobile-desktop body[data-scene="lab"] .site-header { top:18px; }
 .mobile-desktop .lab-heading { top:66px; }
 .mobile-desktop .lab-heading h1 { font-size:20px; margin-top:7px; }
 .mobile-desktop .lab-stage { height:clamp(264px,calc(100svh - 150px),380px); }
 .mobile-desktop .lab-stage .potion { width:clamp(80px,18svh,105px); padding-bottom:22px; }
 .mobile-desktop .potion-name { top:calc(100% - 20px); font-size:12px; }
}