/* Shared state header, outside both 3D viewports. */
:root{--state-header-height:52px}
.state-header{height:var(--state-header-height);box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) 36px;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #dfe7e1;background:#fafcf9;color:#263e33;font:12px/1.4 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;position:relative;z-index:32}
.state-brand{display:flex;align-items:center;gap:14px;min-width:0;color:inherit;text-decoration:none;white-space:nowrap}
.state-brand strong{font-size:19px;font-weight:750;letter-spacing:.2px;line-height:1.2}
.state-nav{display:flex;align-items:center;justify-self:center;gap:6px;max-width:100%;min-width:0;border:0;background:transparent;padding:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.state-nav::-webkit-scrollbar{display:none}.state-tab-short{display:none}
.state-nav a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:36px;padding:5px 12px;color:#344f40;text-decoration:none;white-space:nowrap;border:1px solid #dfe7e0;border-radius:7px;background:#fff;font-size:12px}
.state-nav a[aria-current=page]{border-color:#afc8b6;background:#edf5ee;color:#265c3f;font-weight:600;box-shadow:none}
.state-nav a:hover{color:#245c3e;background:#f8fbf7}
.state-language-control{box-sizing:border-box;position:relative;display:grid;place-items:center;justify-self:end;width:36px;height:36px;border:1px solid #dfe7e1;border-radius:7px;background:#fff;color:#40594b}
.state-language-control svg{width:19px;height:19px;pointer-events:none}
.state-language-control .state-language{position:absolute;inset:0;width:100%;height:100%;min-width:0;max-width:100%;margin:0;padding:0;opacity:0;cursor:pointer;font-size:16px}
.state-language-control:hover{background:#edf5ee}
.state-header a:focus-visible,.state-language-control:focus-within{outline:2px solid #418b63;outline-offset:2px}
.atlas-state{height:100dvh;overflow:hidden}
.atlas-state #root{height:calc(100dvh - var(--state-header-height));min-height:0}
.atlas-state #root .studio{height:100%;min-height:0}
.atlas-state .identity h1,.atlas-state .identity>.eyebrow{display:none}
/* The r16 phone stylesheet forces this legacy control with !important. */
.atlas-state .header-actions .language-control{display:none!important}
@media(max-width:760px){
 .state-header{gap:8px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
 .state-brand strong{font-size:16px}
 .state-nav a{min-height:36px;padding:4px 8px;font-size:11px}
}
@media(max-width:650px), (max-width:1100px) and (max-height:600px){
 .state-header{grid-template-columns:auto minmax(0,1fr) 36px;gap:8px;padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right))}
 .state-brand strong{font-size:13px;letter-spacing:0}
 .state-nav{justify-self:center;gap:3px}
 .state-nav a{flex:none;min-height:40px;font-size:13px;padding:4px 6px}
 .state-tab-full{display:none}.state-tab-short{display:inline}
 .state-language-control{width:36px;height:40px}
 html[lang=en] .state-brand strong{font-size:12px}html[lang=en] .state-nav a{font-size:12px;padding-inline:3px}
 /* Keep the original search action inside the atlas, below the shared header. */
 .atlas-state .header-actions .top-actions{position:absolute!important}
}
@media(max-width:360px){.state-header{grid-template-columns:auto minmax(0,1fr) 32px;gap:4px}.state-brand strong{font-size:12px}.state-nav a{font-size:12px;padding-inline:4px}.state-language-control{width:32px}html[lang=en] .state-brand strong{font-size:10.5px}html[lang=en] .state-nav{gap:2px}html[lang=en] .state-nav a{font-size:11px;padding-inline:1.5px}}

.atlas-state .studio-footer .atlas-about-button{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;padding:0;border:1px solid #d4e1d7;border-radius:50%;background:#f2f6f2;color:#66816f;font-size:13px;font-weight:650}