/* Responsive header palette shares the blue-violet glass system on every route. */
html[data-site=baxs]{--bx-nav-header-bg:linear-gradient(108deg,#232575f5,#5142bef2 52%,#784ec9f2);--bx-nav-header-ink:#f6f9ff;--bx-nav-panel-bg:#443383;--bx-nav-panel-ink:#f6f9ff;--bx-nav-panel-muted:#d4e2ff;--bx-nav-panel-border:#bed5ff59;--bx-nav-selected-bg:#e1eaff24;--bx-nav-selected-ink:#fff;--bx-nav-hover-bg:#d3e5ff1f;--bx-nav-focus:#c4e3ff;--bx-nav-logo-filter:brightness(0) invert(1)}
html[data-site=baxs] body>header.bx-header,
html.site-navigation-ready[data-site=baxs] body>header.bx-header:is(#header){background:var(--bx-nav-header-bg)!important;color:var(--bx-nav-header-ink)!important;border-bottom:1px solid #c6dcff59!important;backdrop-filter:blur(22px) saturate(135%)!important;-webkit-backdrop-filter:blur(22px) saturate(135%)!important;box-shadow:inset 0 1px 0 #ffffff26,0 5px 22px #263c8212}
html[data-site=baxs] body>header.bx-header .site-nav-list{color:#f6f9ff}
html.site-navigation-ready[data-site=baxs] body>header.bx-header .site-nav-panel{background:linear-gradient(115deg,#323078,#62439d)!important;backdrop-filter:blur(22px) saturate(135%)!important;-webkit-backdrop-filter:blur(22px) saturate(135%)!important;box-shadow:0 18px 42px #243b742b,inset 0 1px 0 #ffffff45!important}
html.site-navigation-ready.site-navigation-compact[data-site=baxs] body>header.bx-header .site-nav-list{background:linear-gradient(115deg,#323078,#62439d)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
html[data-site=baxs] body>header.bx-header .site-language{--lang-ink:#f6f9ff;--lang-accent:#dcecff;--lang-soft:#d5e5ff26;color:#f6f9ff!important}
html[data-site=baxs] body>header.bx-header .language-trigger{color:#f6f9ff;background:#d0e6ff0d;border-color:#b7d5ff66;box-shadow:inset 0 1px 0 #ffffff17}
html[data-site=baxs] body>header.bx-header .language-popover{background:linear-gradient(115deg,#38307d,#6546a1);border-color:#b7d5ff66;color:#f6f9ff;box-shadow:0 16px 38px #243b742b;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-site=baxs] body>header.bx-header .language-menu-title{color:#d4e2ff;border-color:#bed5ff40}
html[data-site=baxs] body>header.bx-header .language-popover small{color:#d4e2ff}
@media(min-width:801px){
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero{--bx-opening-height:clamp(430px,calc(100svh - var(--navigation-header,80px) - 132px),650px)}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-main{min-height:var(--bx-opening-height);padding-block:clamp(28px,5svh,60px)}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art{top:0;bottom:122px;left:0;right:max(0px,calc((100vw - 1440px)/2));height:auto;aspect-ratio:auto}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:right center}
 /* 原系统画面完整显示，宽屏不把截图连同组件无限拉高；放大入口保持可用。 */
 html[data-site=baxs] body:not(.in-demo) #app .v4-real-screen:not(.v4-real-hero) .v4-screen-open>img{max-height:clamp(320px,calc(100svh - 240px),560px);object-fit:contain}
}

/* One continuous brand scene: artwork, copy and product links share the same field. */
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero{background:#14112d}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-stage{background:linear-gradient(115deg,#111027 0%,#19143b 55%,#342054 100%)}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;mask-image:none;-webkit-mask-image:none}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:right 33%;mask-image:none;-webkit-mask-image:none}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#11102770 0%,#11102720 32%,transparent 55%),linear-gradient(180deg,transparent 56%,#17112f22 71%,#17112fe8 100%)}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-quick-links{background:transparent;border-top-color:#d1b9f536}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-description{color:#d0c8e1}
html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-quick-links p{color:#c9beda}
/* Keep the homepage artwork continuous behind the navigation while preserving
   the original hero content height and spacing. Secondary pages keep the
   regular sticky light header. */
html[data-site=baxs] body:not(.in-demo):has(.bx-brand-hero)>header.bx-header{position:absolute;inset:0 0 auto;z-index:40;background:linear-gradient(180deg,#100d2bd9 0%,#100d2b85 58%,transparent 100%)!important;border-bottom-color:#ffffff24!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
html[data-site=baxs] body:not(.in-demo):has(.bx-brand-hero) .bx-brand-hero{padding-top:80px}
html[data-site=baxs] body:not(.in-demo):has(.bx-brand-hero) .bx-brand-hero .bx-hero-stage{inset:0}
/* The wide artwork scales from hero height, keeping the sculpture aligned to the 1320px content grid. */
@media(min-width:801px){
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-brand-art img{width:100%;object-position:calc(50% - 45px) center;transform:scale(1.12);transform-origin:74% 50%}
}
@media(min-width:1101px){
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-main{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-copy{width:100%;max-width:600px}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-description{width:100%;max-width:540px;text-wrap:pretty}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .actions{gap:8px;flex-wrap:nowrap!important}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .actions .btn{padding-inline:16px;white-space:nowrap}
 html[data-site=baxs][lang=en] body:not(.in-demo) #app .bx-brand-hero h1{font-size:clamp(40px,3.3vw,48px);text-wrap:wrap}
}
@media(max-width:800px){
 html[data-site=baxs] body:not(.in-demo):has(.bx-brand-hero) .bx-brand-hero{padding-top:72px}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-main{position:relative;padding-bottom:calc(100vw * 870 / 860);isolation:isolate}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art{position:absolute;inset:auto auto 0 50%;width:100vw;height:calc(100vw * 870 / 860);transform:translateX(-50%);z-index:-1}
 /* Center the sculpture itself: the mobile artwork has extra space on its left. */
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art img{object-fit:cover;object-position:center;transform:translateX(-9.5%) scale(1.22);transform-origin:center}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-art:after{background:linear-gradient(180deg,#15112f 0%,#15112f20 16%,transparent 30%,transparent 73%,#1c1435aa 90%,#1e1538 100%)}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-stage{background:linear-gradient(180deg,#14112d 0%,#171230 42%,#1e1538 100%)}
}
@media(min-width:801px) and (max-height:740px){
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-description{margin-block:19px 24px}
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-hero-brand{margin-top:20px}
 html[data-site=baxs] body:not(.in-demo) #app .v4-experience-hero{padding-block:30px 42px}
 html[data-site=baxs] body:not(.in-demo) #app .v4-experience-hero .v4-experience-heading{padding-top:12px;margin-bottom:30px}
 html[data-site=baxs] body:not(.in-demo) #app .v4-experience-options>a,
 html[data-site=baxs] body:not(.in-demo) #app .v4-experience-options>button{padding-block:19px}
}

/* Keep the full-bleed scene and its complete sculpture visible on narrower desktop/tablet viewports. */
@media(min-width:801px) and (max-width:1279px){
 html[data-site=baxs] body:not(.in-demo) #app .bx-brand-hero .bx-brand-art img{width:100%;object-position:calc(70% + clamp(0px,calc((100vw - 1000px) * .4),112px)) center}
}
