.orientation-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:auto;padding:32px 24px max(28px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 38%,#61452c29,transparent 62%),#0b1219;text-align:center;color:#eee9df}
.orientation-content{width:min(350px,100%);margin:auto}
.orientation-brand{display:inline-block;font-size:32px;font-weight:600;letter-spacing:-2px;color:#eee9df}.orientation-brand span{color:#e3b17c}
.orientation-art{display:block;width:164px;height:122px;margin:38px auto 24px;color:#e3b17c}.portrait-outline{opacity:.2;stroke-dasharray:4 5}.landscape-phone{filter:drop-shadow(0 0 12px #e3b17c20)}
.orientation-eyebrow{font-size:9px;letter-spacing:2px;color:#c0a98e;margin:0 0 18px}
.orientation-gate h1{font-size:clamp(36px,10vw,46px);line-height:1.08;letter-spacing:-1.5px;font-weight:400;margin:0 0 22px;outline:none}.orientation-gate h1 em{font-family:Georgia,serif;color:#e3b17c;font-weight:400}
.orientation-copy{color:#b9c1c4;font-size:14px;line-height:1.8;margin:0 0 28px}
.orientation-launch{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;max-width:280px;width:100%;margin:auto;padding:14px 18px;border:1px solid #edc3984d;border-radius:7px;background:#e3b17c;color:#21180f;font-size:13px;font-weight:500}.orientation-launch:hover{background:#f0c595;color:#21180f}.orientation-launch:disabled{opacity:.65;cursor:wait}.orientation-launch:focus-visible{outline:2px solid #fff1d8;outline-offset:5px}
.orientation-status{font-size:11px;line-height:1.6;color:#9daab2;max-width:280px;margin:18px auto 0;min-height:36px}
.needs-landscape #studio-app{visibility:hidden}
.phone-fullscreen{display:none}
@media(max-width:600px) and (orientation:portrait){body{height:100dvh}}
/* A wide studio composition with controls scaled to a phone's shorter height. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 body{height:100dvh}
 header{height:48px;padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
 .brand{gap:10px}.brand>span{font-size:29px}.brand small{font-size:7px;letter-spacing:.65px}.brand b{display:none}
 .header-links{gap:14px;font-size:10px}.header-links>span{display:none}.header-links>a:last-child{display:none}
 .header-links .phone-fullscreen{display:flex;align-items:center;gap:7px;padding:7px 9px;min-height:44px;font-size:9px}
 #welcome{left:max(5%,env(safe-area-inset-left));top:auto;bottom:calc(88px + env(safe-area-inset-bottom));width:min(360px,48vw);transform:none;display:flex;flex-direction:column;align-items:flex-start;overflow:visible}
 #welcome>*{flex-shrink:0}
 #welcome .eyebrow{font-size:7px;margin:0 0 10px}#welcome h1{font-size:clamp(32px,5.2vw,46px);line-height:1.03;letter-spacing:-1.7px;margin:10px 0 12px}
 #welcome .intro{font-size:11px;line-height:1.65;margin:0;max-width:340px}
 #welcome .primary{width:auto;max-width:100%;height:46px;min-height:46px;padding:8px 16px;margin-top:14px;font-size:13px;line-height:1.25;gap:24px;border-radius:8px}
 #welcome .primary__icon{width:20px;height:20px;border:0;background:none;border-radius:0}
 #welcome .primary__icon svg{width:16px;height:16px}
 #welcome .room-hint{display:none}
 .studio-footer{inset:auto max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));width:min(740px,calc(100% - 48px))}
 .studio-footer .studio-dock{padding:5px;border-radius:12px;gap:3px;grid-template-columns:.95fr 1fr 1fr 1.1fr 1fr}
 .studio-footer .dock-item{min-height:44px;padding:6px 8px;gap:7px}
 .studio-footer .dock-icon{width:17px;height:17px;flex-basis:17px}
 .studio-footer .dock-copy{gap:4px}.studio-footer .dock-title{font-size:11px}.studio-footer .dock-title-full{display:none}.studio-footer .dock-title-short{display:block}
 .studio-footer .dock-item small{font-size:9px}.studio-footer .dock-active-mark{right:5px;top:5px}
 .studio-footer .footer-hint{display:none}

 #object-tools,#object-tools:has(.volume-tools){bottom:77px;max-width:90vw;padding:4px}
 #object-tools button,#object-tools a{font-size:10px;padding:8px 10px}
 #object-tools .volume-tools{max-width:85vw}
 #contact-content{top:48%;left:5%;transform:translateY(-40%);padding:0 20px 0 0}
 #contact-content h2{font-size:29px;line-height:1.06;margin-bottom:12px}#contact-content>a{font-size:11px;padding:5px 0}
 #book-reader{top:73px;bottom:137px;width:min(860px,90vw)}
 #book-react-root{min-height:100px}#book-paper-preview{min-height:90px;height:calc(100% - 62px);padding:8px 16px 0}
 #book-reader:has(#book-paper-preview:not([hidden])) #book-reader-status{display:none}
 #book-text{padding:8px 20px}#book-text h2{font-size:15px;margin-bottom:4px}#book-text .book-stack{font-size:9px;margin:0}
 dialog{max-height:calc(100dvh - 16px);padding:26px 20px 10px}dialog img{max-height:calc(100dvh - 80px)}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:660px){
 .brand small{display:none}.header-links{gap:10px}.header-links>a:last-child{display:none}
 .studio-footer{width:calc(100% - 32px)}.studio-footer .studio-dock{grid-template-columns:repeat(5,minmax(0,1fr))}
 .studio-footer .dock-item{flex-direction:column;gap:4px;min-height:44px;padding:5px 2px}.studio-footer .dock-title{font-size:10px}.studio-footer .dock-item small{display:none}
 #welcome .intro{font-size:11px;max-width:290px}#welcome .primary{margin-top:12px}

}

/* Keep the complete welcome content above the dock on short phones. */
@media(orientation:landscape) and (max-height:380px) and (max-width:1100px){
 #welcome .eyebrow{margin-bottom:4px}
 #welcome h1{font-size:30px;line-height:1;margin:4px 0 8px}
 #welcome .intro{font-size:11px;line-height:1.45}
 #welcome .primary{margin-top:10px}
}