/* 基础重置 */
@import url('../static/icon/iconfont.css');
@import url('../static/dist/swiper-11.0.3/swiper/swiper-bundle.min.css');

*{
    margin: 0;
    padding: 0;
    user-select: none;
}

.development_notice {
    position: absolute;
    top: 38%;
    left: 50%;
    z-index: 210;
    width: max-content;
    max-width: 88%;
    padding: 1.4vh 2.8vh;
    padding: 1.4svh 2.8svh;
    box-sizing: border-box;
    border: 0.14vh solid rgba(var(--notice-border-rgb), 0.25);
    
    border-radius: 1vh;
    border-radius: 1svh;
    background: rgba(var(--notice-bg-rgb), 0.94);
    box-shadow: 0 1vh 3vh rgba(var(--shadow-rgb), 0.3);
    
    color: var(--notice-text);
    font-size: 1.9vh; font-size: clamp(0.875rem, 1.9vh, 1.125rem);
    font-size: 1.9vh; font-size: clamp(0.875rem, 1.9svh, 1.125rem);
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
}
@supports (height: 1svh) {
    .development_notice { border: 0.14svh solid rgba(var(--notice-border-rgb), 0.25); box-shadow: 0 1svh 3svh rgba(var(--shadow-rgb), 0.3); }
}

.development_notice.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .development_notice { transition: none; }
}

/* 产品选择页：独立覆盖层，尺寸随现有可视视口计算，保留底层三维状态。 */
/* 一级导航首屏不闪现默认产品 / 加载页；模型选择后才初始化三维场景。 */
html.viewer_page[data-viewer-route="products"],
html.viewer_page[data-viewer-route="products"] .main_container { background: #000000; }
html.viewer_page[data-viewer-route="products"] .main_container > :not(#productPicker):not(#developmentNotice) { visibility: hidden; }
html.viewer_page[data-viewer-route="products"] #loadingScreen { display: none; }
html.viewer_page[data-viewer-route="products"] #productPicker { transition: none; }
.menu_btn .item[data-action="product"]:focus { outline: none; }
.menu_btn .item[data-action="product"][data-input-mode="keyboard"]:focus-visible {
    outline: 0.185185vh solid var(--theme-bright);
    outline-offset: 0.462963vh;
}
.product_picker {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 80;
    display: grid;
    grid-template-rows: 14% 11% minmax(0, 1fr) 17%;
    box-sizing: border-box;
    padding-top: 2vh;
    padding-top: 2svh;
    overflow: hidden;
    color: var(--theme-text);
    background:
        radial-gradient(ellipse at 15% 25%, rgba(var(--picker-cloud-one-rgb), 0.25), transparent 31%),
        radial-gradient(ellipse at 18% 84%, rgba(var(--picker-cloud-two-rgb), 0.3), transparent 32%),
        linear-gradient(175deg, var(--picker-top) 30%, var(--picker-mid) 62%, var(--picker-bottom));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3vh);
    transform: translateY(3svh);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}
.product_picker.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}
.product_picker:focus { outline: none; }
/* 一级导航直接显示黑色 iframe；二级卡片在打开、等待 iframe 和退出时都不参与绘制。 */
.product_picker.is-overview-view { background: #000000; }
.product_picker.has-overview {
    /* 首次只打开导航时，父场景还没有安装视口监听；导航自行跟随小视口和横竖屏。 */
    top: var(--navigation-overlay-top, 0px); left: var(--navigation-overlay-left, 0px);
    right: auto; bottom: auto;
    width: var(--navigation-overlay-width, 100%); height: var(--navigation-overlay-height, 100%);
}
.product_picker.is-overview-view::before { display: none; }
.product_picker.is-overview-view > :not(.product_overview_layer) { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.product_picker.is-overview-view .product_overview_layer { transition: none; }
/* 一级导航覆盖在原产品选择页中，关闭后直接露出原来的 Three.js canvas。 */
.product_overview_layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background: #000000; opacity: 0; visibility: hidden; pointer-events: none; outline: none; transition: opacity 240ms ease, visibility 0s linear 240ms; }
.product_overview_layer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.product_overview_frame { display: block; width: 100%; height: 100%; border: 0; outline: none; background: #000000; }
.product_overview_frame:focus { outline: none; }
/* 首次还没有三维场景时，也给一级导航独立的小视口高度；JS 补旧内核的真实可视高度。 */
@media (max-width: 996px), (hover: none) and (pointer: coarse) {
    .product_overview_layer { bottom: auto; height: 100vh; max-height: 100%; }
    @supports (height: 100svh) { .product_overview_layer { height: 100svh; } }
}
.product_overview_fallback { position: absolute; top: 3vh; left: 3vh; top: 3svh; left: 3svh; padding: .8em 1.2em; border: .06rem solid #388BD866; border-radius: 4em; background: #091424; color: #C9D9EA; cursor: pointer; }
.product_overview_layer.is-ready .product_overview_fallback { display: none; }
@media (prefers-reduced-motion: reduce) { .product_overview_layer { transition: none; } }
.product_picker::before {
    content: "";
    position: absolute;
    top: 15vh;
    top: 15svh;
    left: 10vw;
    width: 28vh;
    width: 28svh;
    height: 28vh;
    height: 28svh;
    border-radius: 50%;
    background: conic-gradient(from 20deg, var(--picker-orbit-one), var(--picker-orbit-two), var(--picker-orbit-three), var(--picker-orbit-four), var(--picker-orbit-five), var(--picker-orbit-one));
    filter: blur(6vh);
    filter: blur(6svh);
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
}
.product_picker :where(button) {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.product_picker_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.product_picker_logo .iconfont {
    font-size: 6.2vh;
    font-size: 6.2svh;
    line-height: 1;
}
.product_picker_close,
.product_picker .language_link {
    position: absolute;
    top: 4vh;
    top: 4svh;
    right: 3vh;
    right: 3svh;
    display: grid;
    place-items: center;
    width: 5.5vh;
    width: 5.5svh;
    height: 5.5vh;
    height: 5.5svh;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.product_picker_close .iconfont,
.product_picker .language_link .iconfont {
    font-size: 3vh;
    font-size: 3svh;
}
.product_picker .language_link {
    display: none;
    left: 3vh;
    left: 3svh;
    right: auto;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.product_picker_close:hover,
.product_picker .language_link:hover {
    opacity: 1;
    background: rgba(var(--theme-ink-rgb), 0.05);
}
.product_picker_heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vh;
    gap: 1svh;
    padding: 0 8vw;
    text-align: center;
}
.product_picker_heading h2 {
    font-size: 2.5vh;
    font-size: 2.5svh;
    line-height: 1.4;
}
.product_picker_heading p {
    font-size: 1.4vh;
    font-size: 1.4svh;
    line-height: 1.5;
    color: rgba(var(--theme-ink-rgb), 0.46);
}
.product_picker_carousel {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.product_picker_carousel > [hidden] { display: none; }
.product_picker_empty {
    width: 100%;
    padding: 0 6vw;
    box-sizing: border-box;
    text-align: center;
    color: var(--muted-text);
    font-size: 1.8vh;
    font-size: 1.8svh;
    line-height: 1.6;
}
.product_swiper {
    width: 100%;
    height: 54vh;
    height: 54svh;
    max-height: 100%;
    margin: 0;
    touch-action: pan-y;
    cursor: grab;
}
.product_swiper.swiper-grabbing { cursor: grabbing; }
.product_swiper:not(.swiper-initialized) { overflow-x: auto; scroll-snap-type: x mandatory; }
.product_swiper:not(.swiper-initialized) .swiper-wrapper { gap: 3vh; gap: 3svh; }
.product_swiper .swiper-slide { scroll-snap-align: center; }
.product_swiper .swiper-slide {
    box-sizing: border-box;
    width: 76vw; width: min(49vh, 76vw);
    width: 76vw; width: min(49svh, 76vw);
    height: 100%;
}
.product_card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 3vh;
    padding: 3svh;
    box-sizing: border-box;
    border: 0.14vh solid rgba(var(--theme-ink-rgb), 0.23);
    
    border-radius: 2vh;
    border-radius: 2svh;
    background: linear-gradient(145deg, rgba(var(--theme-ink-rgb), 0.015), rgba(var(--theme-ink-rgb), 0.025));
    cursor: pointer;
    transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
@supports (height: 1svh) {
    .product_card { border: 0.14svh solid rgba(var(--theme-ink-rgb), 0.23); }
}

.product_card.is-current { border-color: rgba(var(--theme-ink-rgb), 0.4); }
.product_card:disabled { cursor: wait; }
.product_picker button:focus-visible,
.product_picker a:focus-visible {
    outline: 0.22vh solid var(--theme-accent);
    
    outline-offset: -0.45vh;
    outline-offset: -0.45svh;
}
@supports (height: 1svh) {
    .product_picker button:focus-visible,
.product_picker a:focus-visible { outline: 0.22svh solid var(--theme-accent); }
}

.product_card_media {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 0;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product_card_media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}
.product_card [hidden] { display: none; }
.product_card_placeholder {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    gap: 2svh;
    color: rgba(var(--picker-placeholder-rgb), 0.25);
}
.product_card_code {
    font-family: Arial, sans-serif;
    font-size: 7vh;
    font-size: 7svh;
    line-height: 1;
    letter-spacing: 0.04em;
}
.product_card_image_note {
    font-size: 1.5vh;
    font-size: 1.5svh;
    color: rgba(var(--theme-ink-rgb), 0.3);
}
.product_card_name {
    width: 100%;
    flex: none;
    margin-top: 2vh;
    margin-top: 2svh;
    font-size: 2.1vh;
    font-size: 2.1svh;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease;
}
/* 未开放的产品保留展示：灰化图片、虚线边框与状态标记，不执行可选产品的悬停动画。 */
.product_card.is-developing {
    cursor: default;
    border-style: dashed;
    border-color: rgba(var(--theme-ink-rgb), 0.14);
    background: none;
}
.product_card.is-developing .product_card_media { opacity: 0.48; filter: grayscale(1); }
.product_card.is-developing .product_card_name { color: var(--muted-text); }
.product_card_status {
    position: absolute;
    z-index: 1;
    top: 1.6vh; top: 1.6svh;
    right: 1.6vh; right: 1.6svh;
    padding: 0.45vh 1.1vh; padding: 0.45svh 1.1svh;
    border: 0.1vh solid rgba(var(--theme-ink-rgb), 0.18);
    
    border-radius: 50vh;
    font-size: 1.35vh; font-size: max(1.35vh, 0.8vw); font-size: 1.35vh; font-size: max(1.35svh, 0.8vw);
    line-height: 1.4;
    color: var(--muted-text);
    background: rgba(var(--theme-ink-rgb), 0.06);
    white-space: nowrap;
    pointer-events: none;
}
@supports (height: 1svh) {
    .product_card_status { border: 0.1svh solid rgba(var(--theme-ink-rgb), 0.18); }
}

/* 只移动卡片内部内容，轮播项的尺寸和位置不变；触屏不保留鼠标悬停状态。 */
@media (hover: hover) and (pointer: fine) {
    .product_card:not(:disabled):not(.is-developing):hover {
        border-color: rgba(var(--theme-line-rgb), 0.8);
        background-color: rgba(var(--theme-accent-rgb), 0.08);
        box-shadow: inset 0 0 2.4vh rgba(var(--theme-glow-rgb), 0.13);
        
    }
@supports (height: 1svh) {
    .product_card:not(:disabled):not(.is-developing):hover { box-shadow: inset 0 0 2.4svh rgba(var(--theme-glow-rgb), 0.13); }
}

    .product_card:not(:disabled):not(.is-developing):hover .product_card_media {
        transform: translateY(-0.6vh) scale(1.035);
        transform: translateY(-0.6svh) scale(1.035);
    }
    .product_card:not(:disabled):not(.is-developing):hover .product_card_name {
        color: var(--theme-accent);
        transform: translateY(-0.35vh);
        transform: translateY(-0.35svh);
    }
}
@media (prefers-reduced-motion: reduce) {
    .product_card, .product_card_media, .product_card_name { transition: none; }
    .product_card:not(:disabled):hover .product_card_media,
    .product_card:not(:disabled):hover .product_card_name { transform: none; }
}
.product_picker_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    gap: 3vh;
    gap: 3svh;
}
.product_picker_back {
    border: 0;
    border-radius: 50vh;
    border-radius: 50svh;
    padding: 1.3vh 3.2vh;
    padding: 1.3svh 3.2svh;
    font-size: 1.9vh;
    font-size: 1.9svh;
    line-height: 1.4;
    background: rgba(var(--picker-return-rgb), 0.5);
    cursor: pointer;
}
.product_picker_overview { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; white-space: nowrap; }
.product_picker_overview:hover { background: rgba(var(--picker-return-rgb), 0.8); }
.product_picker_back:disabled { opacity: 0.85; }
.product_picker_back[aria-pressed="true"] {
    background: var(--theme-accent);
    color: var(--on-accent);
}
@media (hover: hover) and (pointer: fine) {
    .product_picker_back[aria-pressed="false"]:hover {
        background: rgba(var(--picker-return-rgb), 0.8);
    }
}

@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    .product_picker_close,
    .product_picker .language_link {
        top: 3.2vh;
        top: 3.2svh;
        right: 2.2vh;
        right: 2.2svh;
        width: 5.5vh; width: max(5.5vh, 5vw);
        width: 5.5vh; width: max(5.5svh, 5vw);
        height: 5.5vh; height: max(5.5vh, 5vw);
        height: 5.5vh; height: max(5.5svh, 5vw);
    }
    .product_picker .language_link {
        display: grid;
        right: auto;
        left: 2.2vh;
        left: 2.2svh;
    }
    .product_picker_heading h2 {
        font-size: 3.6vw; font-size: clamp(2.5vh, 3.6vw, 3vh);
        font-size: 3.6vw; font-size: clamp(2.5svh, 3.6vw, 3svh);
    }
    .product_picker_heading p {
        font-size: 2.5vw; font-size: clamp(1.4vh, 2.5vw, 1.7vh);
        font-size: 2.5vw; font-size: clamp(1.4svh, 2.5vw, 1.7svh);
    }
    .product_card_name {
        font-size: 4vw; font-size: clamp(1.85vh, 4vw, 2.3vh);
        font-size: 4vw; font-size: clamp(1.85svh, 4vw, 2.3svh);
    }
    .product_picker_back {
        font-size: 3.8vw; font-size: clamp(1.7vh, 3.8vw, 2.1vh);
        font-size: 3.8vw; font-size: clamp(1.7svh, 3.8vw, 2.1svh);
    }
    @supports (top: calc(1vh + env(safe-area-inset-top, 0vh))) {
        html.viewer_safe_area .product_picker {
            padding-top: calc(2vh + env(safe-area-inset-top, 0vh));
            
            padding-bottom: env(safe-area-inset-bottom, 0vh);
        }
@supports (height: 1svh) {
    html.viewer_safe_area .product_picker { padding-top: calc(2svh + env(safe-area-inset-top, 0vh)); }
}

        html.viewer_safe_area .product_picker_close,
        html.viewer_safe_area .product_picker .language_link {
            top: calc(3.2vh + env(safe-area-inset-top, 0vh));
            
            right: calc(2.2vh + env(safe-area-inset-right, 0vh));
            
        }
@supports (height: 1svh) {
    html.viewer_safe_area .product_picker_close,
        html.viewer_safe_area .product_picker .language_link { top: calc(3.2svh + env(safe-area-inset-top, 0vh)); right: calc(2.2svh + env(safe-area-inset-right, 0vh)); }
}

        html.viewer_safe_area .product_picker .language_link {
            right: auto;
            left: calc(2.2vh + env(safe-area-inset-left, 0vh));
            
        }
@supports (height: 1svh) {
    html.viewer_safe_area .product_picker .language_link { left: calc(2.2svh + env(safe-area-inset-left, 0vh)); }
}

    }
}
@media (max-height: 540px) and (max-width: 1200px) {
    .product_picker { grid-template-rows: 14% 17% minmax(0, 1fr) 17%; }
    .product_picker_heading { gap: 0.3vh; gap: 0.3svh; }
    .product_picker_heading h2 { font-size: 2.5vh; font-size: max(2.5vh, 1.9vw); font-size: 2.5vh; font-size: max(2.5svh, 1.9vw); }
    .product_picker_heading p { font-size: 1.4vh; font-size: max(1.4vh, 1.2vw); font-size: 1.4vh; font-size: max(1.4svh, 1.2vw); }
    .product_card_name { font-size: 2.1vh; font-size: max(2.1vh, 1.6vw); font-size: 2.1vh; font-size: max(2.1svh, 1.6vw); }
    .product_picker_back { font-size: 1.9vh; font-size: max(1.9vh, 1.45vw); font-size: 1.9vh; font-size: max(1.9svh, 1.45vw); }
}
@media (prefers-reduced-motion: reduce) {
    .product_picker, .product_picker button { transition: none; }
}

/* 产品标题 */

/* 同一模型的型号按钮：PC 放在左侧导航旁；移动端在顶部工具按钮下方。 */
.variant_picker {
    position: absolute;
    z-index: 12;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.8vh;
    gap: 1.8svh;
    top: var(--variant-center-top, 8vh);
    left: calc(var(--variant-nav-right, 10vh) + 3vh);
    
    max-width: 38%;
    transform: translateY(-50%);
}
@supports (height: 1svh) {
    .variant_picker { left: calc(var(--variant-nav-right, 10vh) + 3svh); }
}

.variant_picker[hidden] { display: none; }
.variant_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.75vh 2.7vh;
    padding: 0.75svh 2.7svh;
    min-width: 9vh;
    min-width: 9svh;
    border: 0.14vh solid rgba(var(--theme-ink-rgb), 0.08);
    
    border-radius: 50vh;
    color: var(--theme-text);
    background: rgba(var(--surface-rgb), 0.55);
    font: inherit;
    font-size: 1.9vh;
    font-size: 1.9svh;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
@supports (height: 1svh) {
    .variant_button { border: 0.14svh solid rgba(var(--theme-ink-rgb), 0.08); }
}

.variant_button.is-active {
    background: rgba(var(--theme-accent-rgb), 0.25);
    border-color: rgba(var(--theme-accent-rgb), 0.48);
    box-shadow: 0 0 1.2vh rgba(var(--theme-glow-rgb), 0.22);
    
}
@supports (height: 1svh) {
    .variant_button.is-active { box-shadow: 0 0 1.2svh rgba(var(--theme-glow-rgb), 0.22); }
}

.variant_button:focus-visible { outline: 0.2vh solid var(--theme-focus);  outline-offset: 0.3vh; outline-offset: 0.3svh; }
@supports (height: 1svh) {
    .variant_button:focus-visible { outline: 0.2svh solid var(--theme-focus); }
}

.variant_button:disabled, .variant_button[aria-disabled="true"] { cursor: wait; opacity: 0.5; }
@media (hover: hover) and (pointer: fine) {
    .variant_button:not(:disabled):hover { border-color: var(--theme-accent); background: rgba(var(--theme-accent-rgb), 0.18); }
}
@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    .variant_picker {
        top: 10.5vh; top: 10.5svh;
        /* 给右侧零件胶囊及间距留位；极窄屏由现有 flex-wrap 自然换行。 */
        left: 4%; max-width: calc(96% - 16vh); max-width: calc(96% - 16svh); transform: none;
        gap: .8vh; gap: .8svh;
    }
    .variant_button {
        min-width: 0;
        padding: .6vh 1.2vh; padding: .6svh 1.2svh;
        font-size: 1.7vh; font-size: max(1.7vh, 2.7vw); font-size: 1.7vh; font-size: max(1.7svh, 2.7vw);
    }
    @supports (top: calc(1vh + env(safe-area-inset-top, 0vh))) {
        html.viewer_safe_area .variant_picker {
            top: calc(10.5vh + env(safe-area-inset-top, 0vh));
            
            left: calc(4% + env(safe-area-inset-left, 0vh));
            max-width: calc(96% - 16vh - env(safe-area-inset-left, 0vh) - env(safe-area-inset-right, 0vh));
        }
@supports (height: 1svh) {
    html.viewer_safe_area .variant_picker {
        top: calc(10.5svh + env(safe-area-inset-top, 0vh));
        max-width: calc(96% - 16svh - env(safe-area-inset-left, 0vh) - env(safe-area-inset-right, 0vh));
    }
}

    }
}
@media (prefers-reduced-motion: reduce) { .variant_picker, .variant_button { transition: none; } }

/* ================= 标题栏平滑过渡样式 ================= */
.product_name_container{
    --product-title-full-row-enabled: 0;
    --product-title-wing: 10vh;
    --product-title-overlap: 0vh;
    --product-title-compact-em: 9; /* 文字自然宽度超过 9 个字号后，逐步收窄两翼。 */
    --product-title-min-wing-scale: .3; /* 长标题最窄仍保留原翼宽的 30%。 */
    --product-title-curve-bend: .78; /* 曲线中段陡峭度：原版 .4；越接近 1 越陡，建议 .6～.9。 */
    --product-title-width-limit: 92%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    max-width: var(--product-title-available-width, var(--product-title-width-limit));
    padding: 0 var(--product-title-wing);
    padding: 0 calc(var(--product-title-wing) * var(--product-title-wing-scale, 1));
    user-select: none;
}
@supports (height: 1lvh) {
    .product_name_container { --product-title-wing: 10vh; --product-title-wing: 10lvh; }
}
.product_name_background {
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: none;
}
/* 一个连续轮廓同时填充两翼和中间，不再拼接伪元素背景。 */
.product_name_shape {
    fill: var(--title-background);
    /* 静态 / 无脚本回退；正常切换由标题控制器显式传入起止色。 */
    transition: fill var(--theme-transition-duration, 520ms) ease;
}
@media (prefers-reduced-motion: reduce) { .product_name_shape { transition: none; } }
.product_name_container.is-compact .name {
    white-space: normal;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    text-align: center;
    text-wrap: balance; /* 支持时均衡两行长度；旧浏览器沿用上面的正常换行。 */
}

.product_name_container .name{
    position: relative;
    z-index: 1;
    min-width: 0;
    margin: 0 calc(-1 * var(--product-title-overlap));
    color: var(--theme-text);
    font-size: 3.6vh;
    font-size: 3.6lvh;
    padding: 0 0 1.3vh;
    padding: 0 0 1.3lvh;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}

/* 导航与面板 */
/* =========================================================================
   【导航复合外壳 (nav_wrapper)】
   ========================================================================= */
   .nav_wrapper {
    --viewer-dock: side;
    position: absolute;
    left: 1.5%;
    top: 6%;
    height: 88%;
    display: flex;
    align-items: stretch;
    z-index: 10;
    pointer-events: none;
    /* 折叠时不阻挡 3D 画布交互 */
    border-radius: 2vh;
    border-radius: 2lvh;
    background: linear-gradient(to bottom, var(--nav-top) 40%, var(--nav-mid), var(--nav-bottom));
    overflow: hidden;
        /* opacity: 0;
    */
        backdrop-filter: blur(2.5vh) saturate(180%);
        -webkit-backdrop-filter: blur(2.5vh) saturate(180%);
}

/* =========================================================================
   【左侧固定操作栏 (nav_bar)】
   ========================================================================= */
.nav_bar {
    width: 8.5vh;
    width: 8.5lvh;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    pointer-events: auto;
    flex-shrink: 0;
}
.nav_bar .logo .item .iconfont{
    font-size: 4vh !important;
    font-size: 4lvh !important;
}
.nav_bar .iconfont, .menu_btn .iconfont {
    color: var(--theme-text);
    font-size: 1.9vh;
    font-size: 1.9svh;
}

.nav_bar .nav_list {
    gap: 4.4vh;
    gap: 4.4svh;
    display: flex;
    flex-direction: column;
}

.nav_bar .item, .menu_btn .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    gap: 1.4vh;
    gap: 1.4svh;
    transition: transform 0.2s ease;
}

.nav_bar .item:active, .menu_btn .item:active {
    transform: scale(0.92);
}

.nav_bar .item .name, .menu_btn .item .name {
    color: var(--theme-text);
    font-size: 1.6vh;
    font-size: 1.6svh;
    transition: color 0.3s ease;
}

/* 激活高亮态 (如设计图中的“详情”) */
.nav_bar .item.active .iconfont,
.nav_bar .item.active .name {
    color: var(--theme-accent);
    text-shadow: 0 0 1.111111vh rgba(var(--theme-accent-rgb), 0.8);
}

/* =========================================================================
   【右侧灵动展开抽屉 (nav_drawer)】
   ========================================================================= */
.nav_drawer {
    position: relative;
    width: 0;
    margin-left: 0;
    overflow: hidden;
    pointer-events: auto;
    box-sizing: border-box;
    /* 苹果专属灵动岛流体阻尼曲线 */
    transition: 
        width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
}

/* 展开激活态 */
.nav_drawer.open {
    width: var(--drawer-content-width, 0);
    opacity: 1;
}

/* 内部内容层 (随展开平滑淡入滑入) */
.drawer_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* padding: 3vh 3.5vh;
    */
    box-sizing: border-box;
    opacity: 0;
    transition: 
        opacity 0.28s ease,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav_drawer.open .drawer_inner {
    opacity: 1;
    transition-delay: 0.12s;
    /* 略微延时，待外壳展开后优雅浮现 */
}

/* 顶部操作条 */
.drawer_header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 8%;
    padding-right: 7.2vh;
    padding-right: 7.2svh;
    box-sizing: border-box;
    /* margin-bottom: 2.5vh;
    */
}

/* 毛玻璃胶囊标签 */
.capsule_tabs {
    display: flex;
    background: rgba(var(--theme-ink-rgb), 0.08);
    border-radius: 50vh;
    padding: 0.4vh;
}

.capsule_btn {
    border: none;
    outline: none;
    background: transparent;
    color: var(--tab-text);
    padding: 0.6vh 2vh;
    font-size: 1.5vh;
    border-radius: 50vh;
    cursor: pointer;
    transition: all 0.3s ease;
}

.capsule_btn.active {
    background: rgba(var(--theme-action-rgb), 0.4);
    color: var(--theme-text);
    box-shadow: 0 0 1vh rgba(var(--theme-action-rgb), 0.4);
}

/* 关闭按钮独立定位到抽屉外壳，不参与内部面板淡入淡出。 */
.drawer_close_btn {
    position: absolute;
    top: 1.6vh;
    top: 1.6svh;
    right: 1.6vh;
    right: 1.6svh;
    z-index: 2;
    width: 4vh;
    width: 4svh;
    height: 4vh;
    height: 4svh;
    border-radius: 50%;
    background: rgba(var(--theme-ink-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}

.nav_drawer.open > .drawer_close_btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.drawer_close_btn .close_icon {
    color: var(--theme-text);
    font-size: 1.3vh;
    font-size: 1.3svh;
}


/* 面板内容滚动容器 */
.drawer_body {
    height: 72%;
    overflow-y: auto;
    padding: 0 7.2vh;
    padding: 0 7.2svh;
}

/* 极简发光细滚动条 */
.drawer_body::-webkit-scrollbar {
    width: 0.37037vh;
}
.drawer_body::-webkit-scrollbar-track {
    background: transparent;
}
.drawer_body::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-cyan-rgb), 0.4);
    border-radius: 0.925926vh;
}

/* 主标题：特点详情 */
.panel_main_title {
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 7.3vh;
    font-size: 7.3svh;
    padding-left: 7.2vh;
    padding-left: 7.2svh;
    /* font-weight: 300;
    */
    font-weight: lighter;
    color: var(--theme-accent);
    box-sizing: border-box;
}

/* 子分类标题 [ 通用特点 ] */
.detail_section {
    margin-bottom: 3.5vh;
}

.section_subtitle {
    color: var(--subtitle-text);
    font-size: 1.6vh;
    letter-spacing: 0.092593vh;
    margin-bottom: 1.8vh;
}

/* 特点列表项 */
.feature_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.feature_list li {
    display: flex;
    align-items: flex-start;
    gap: 1.2vh;
}

/* 发光小蓝圆点 */
.feature_list .dot {
    width: 0.8vh;
    height: 0.8vh;
    border-radius: 50%;
    background-color: var(--theme-bright);
    box-shadow: 0 0 0.740741vh var(--theme-bright);
    margin-top: 0.6vh;
    flex-shrink: 0;
}

.feature_list .text_box .title {
    color: var(--theme-text);
    font-size: 1.65vh;
    font-weight: 500;
    margin-bottom: 0.6vh;
    line-height: 1.3;
}

.feature_list .text_box .desc {
    color: var(--muted-text);
    font-size: 1.35vh;
    line-height: 1.6;
}

/* 参数抽屉：内容与列数由 HTML 配置，适配现有导航外壳。 */
.nav_wrapper {
    max-width: 97%;
}
.panel_content[hidden], .params_grid[hidden], .params_empty[hidden], .param_unit[hidden] {
    display: none !important;
   
}
.nav_drawer .drawer_body {
    min-height: 0;
    overscroll-behavior: contain;
   
}
.nav_drawer[data-active-panel="params"] .drawer_body {
    padding: 0;
    scrollbar-gutter: stable;
   
}
.panel_params {
    height: 100%;
   
}
.panel_details {
    width: max-content;
    max-width: 100%;
   
}
.params_grid {
    display: grid;
    grid-template-columns: repeat(var(--params-columns, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(13.425926vh, 1fr);
    min-height: 100%;
    margin: 0;
}
.param_item {
    min-width: 0;
    padding: 4vh 5.8vh;
    padding: 4svh 5.8svh;
    box-sizing: border-box;
    border: 0.092593vh solid rgba(var(--theme-ink-rgb), 0.055);
    margin: -0.092593vh 0 0 -0.092593vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4vh;
    gap: 4svh;
}
.param_item[data-span="full"] {
    grid-column: 1 / -1;
   
}
.param_label {
    color: var(--param-label-text);
    font-size: 1.6vh; font-size: clamp(1.111111vh, 1.6vh, 1.574074vh);
    font-size: 1.6vh; font-size: clamp(1.111111svh, 1.6svh, 1.574074svh);
    font-weight: 400;
}
.param_value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.22em;
    row-gap: 0.08em;
    margin: 0;
    color: var(--theme-text);
    font-size: 4.1vh; font-size: clamp(2.222222vh, 4.1vh, 4.444444vh);
    font-size: 4.1vh; font-size: clamp(2.222222svh, 4.1svh, 4.444444svh);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    overflow-wrap: anywhere;
}
.param_unit {
    white-space: nowrap;
    letter-spacing: -0.03em;
   
}
.param_unit sup {
    font-size: 0.6em;
   
}
.params_empty {
    padding: 4vh 7.2vh;
    padding: 4svh 7.2svh;
    color: var(--muted-text);
    font-size: 1.481481vh;
    line-height: 1.6;
}
.nav_drawer[data-active-panel="params"] .panel_main_title,
.nav_drawer[data-active-panel="details"] .panel_main_title {
    color: var(--theme-accent);
    /* 参数页和详情页共用左右留白，内容少、由标题撑开自然宽度时也不贴边。
       移动端仍由后面的响应式规则统一使用 2.4vh / 2.4svh 内边距。 */
    padding-right: 7.2vh;
    padding-right: 7.2svh;
}
.nav_bar [role="button"]:focus-visible, .drawer_close_btn:focus-visible {
    outline: 0.185185vh solid var(--theme-bright);
    outline-offset: 0.462963vh;
   
}
/* 点击/触摸时不显示键盘焦点框；键盘操作仍保留清晰的焦点位置。 */
.nav_wrapper[data-input-mode="pointer"] .nav_bar [role="button"]:focus,
.nav_wrapper[data-input-mode="pointer"] .drawer_close_btn:focus {
    outline: none;
   
}

@media (prefers-reduced-motion: reduce) {
    .nav_drawer, .drawer_inner, .nav_bar .item, .menu_btn .item, .drawer_close_btn {
    transition: none;
   
}
}


/* 仅用于隔离测量自然内容宽度，测完即移除；不参与外壳布局/交互。 */
.nav_drawer.drawer_measure {
    position: absolute;
    top: 0; right: auto; bottom: auto; left: 0; inset: 0 auto auto 0;
    width: max-content !important;
    max-width: none;
    overflow: visible;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}
.drawer_measure .drawer_inner {
    position: relative;
    width: max-content;
    opacity: 1;
    transition: none;
   
}
.drawer_measure > .drawer_close_btn {
    display: none;
   
}
.drawer_measure .drawer_body {
    width: max-content;
    overflow: visible;
    flex: none;
   
}
.drawer_measure .params_grid {
    width: max-content;
    grid-template-columns: repeat(var(--params-columns, 2), max-content);
}
.drawer_measure .param_value {
    flex-wrap: nowrap;
   
}
.drawer_measure .panel_details {
    max-width: none;
   
}

/* 详情页按效果图的纵向比例留白；分组边线贯穿正文区域。 */
.nav_drawer[data-active-panel="details"] .drawer_header {
    height: 6%;
   
}
.nav_drawer[data-active-panel="details"] .panel_main_title {
    height: 20.5%;
    font-size: 8vh;
    font-size: 8svh;
    flex-shrink: 0;
    margin: 0;
    padding-bottom: 2vh;
    padding-bottom: 2svh;
}
.nav_drawer[data-active-panel="details"] .drawer_body {
    height: 73.5%;
    padding: 0;
    margin-right: 1.9vh;
    scrollbar-gutter: stable;
}
/* 保留原生滚动交互；轨道上下留白，视觉长度只占正文中间一段。 */
.nav_drawer[data-active-panel="details"] .drawer_body::-webkit-scrollbar-track {
    margin-top: 14vh;
    margin-top: 14svh;
    margin-bottom: 26vh;
    margin-bottom: 26svh;
    background: rgba(var(--muted-rgb), 0.2);
    border-radius: 0.925926vh;
}
.nav_drawer[data-active-panel="details"] .drawer_body::-webkit-scrollbar-thumb {
    background: rgba(var(--muted-rgb), 0.58);
    border-radius: 0.925926vh;
}
.panel_details .detail_section {
    margin: 0;
    padding: 4.3vh 7.2vh;
    padding: 4.3svh 7.2svh;
    border-top: 0.092593vh solid rgba(var(--muted-rgb), 0.12);
    box-sizing: border-box;
}
.panel_details .section_subtitle {
    margin: 0 0 3.4vh;
    margin: 0 0 3.4svh;
    font-size: 1.7vh;
    font-size: 1.7svh;
    line-height: 1.4;
}
.panel_details .feature_list {
    margin: 0;
    padding: 0;
    gap: 2.2vh;
    gap: 2.2svh;
}
.panel_details .feature_list li {
    gap: 1.8vh;
    gap: 1.8svh;
}
.panel_details .feature_list .text_box {
    min-width: 0;
    max-width: 57.6vh;
    max-width: 57.6svh;
}
.panel_details .feature_list .dot {
    width: 0.6vh;
    width: 0.6svh;
    height: 0.6vh;
    height: 0.6svh;
    margin-top: 0.7vh;
    margin-top: 0.7svh;
    background: var(--theme-accent);
    box-shadow: none;
}
.panel_details .feature_list .title {
    margin: 0 0 0.8vh;
    margin: 0 0 0.8svh;
    font-size: 1.8vh;
    font-size: 1.8svh;
    font-weight: 600;
    line-height: 1.35;
}
.panel_details .feature_list .desc {
    margin: 0;
    font-size: 1.65vh;
    font-size: 1.65svh;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* 产品特点保留原列表排版；配置聚焦零件后支持鼠标、触屏和键盘。 */
.panel_details [data-feature-index][aria-disabled="false"] { cursor: pointer; }
.panel_details [data-feature-index].is-focused .title {
    color: var(--theme-accent);
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .3em;
}
.panel_details [data-feature-index].is-focused .dot {
    background: var(--theme-accent);
    box-shadow: 0 0 0 .3vh rgba(var(--theme-accent-rgb), .22),
        0 0 1.1vh rgba(var(--theme-accent-rgb), .55);
}
.panel_details [data-feature-index]:focus-visible {
    outline: 0.18vh solid var(--theme-accent);
    
    outline-offset: 0.6vh;
    outline-offset: 0.6svh;
}
@supports (height: 1svh) {
    .panel_details [data-feature-index]:focus-visible { outline: 0.18svh solid var(--theme-accent); }
}




/* 颜色编辑器；宽度由色盘、色块与按钮自然撑开后交给 JS 测量。 */
.color_tabs[hidden], .panel_main_title[hidden] {
    display: none !important;
   
}
.nav_drawer[data-active-panel="color"] .drawer_header {
    height: 10%;
    flex-shrink: 0;
    justify-content: space-between;
    padding-left: 4vh;
    padding-left: 4svh;
    box-sizing: border-box;
   
}
.nav_drawer[data-active-panel="color"] .drawer_body {
    height: 90%;
    flex-shrink: 0;
    padding: 1.4vh 5vh 2.4vh;
    padding: 1.4svh 5svh 2.4svh;
    box-sizing: border-box;
   
}
.color_tabs {
    display: flex;
    gap: 1.6vh;
    align-items: center;
   
}
.color_tabs button {
    border: 0;
    background: transparent;
    color: var(--color-tab-text);
    font: inherit;
    font-size: 1.7vh;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.7vh 0;
   
}
.color_tabs button.active {
    color: var(--theme-text);
    text-shadow: 0 0 1.8vh var(--theme-input-focus);
   
}
.color_tabs button:disabled {
    opacity: 0.4;
    cursor: default;
   
}
.color_editor {
    width: max-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2vh;
    gap: 3.2svh;
    margin-left: auto; margin-right: auto; margin-inline: auto;
   
}
/* 默认保持原色盘大小；空间不足时由真实内容高度计算剩余可用尺寸。 */
.color_wheel_wrap {
    position: relative;
    width: var(--color-wheel-size, 30vh);
    max-width: 100%;
    aspect-ratio: 1;
    justify-self: center;
   
}
/* var() 的回退单位需先检测支持，避免旧浏览器在计算阶段把整条宽度声明作废。 */
@supports (width: 1svh) {
    .color_wheel_wrap {
        width: var(--color-wheel-size, 30vh);
        width: var(--color-wheel-size, 30svh);
   
}
}
.color_wheel_wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    cursor: crosshair;
    touch-action: none;
   
}
.color_marker {
    position: absolute;
    width: 1.5vh;
    height: 1.5vh;
    min-width: 1.111111vh;
    min-height: 1.111111vh;
    border: 0.185185vh solid var(--control-handle-border);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0.185185vh var(--wheel-outline);
    pointer-events: none;
   
}
.color_value_slider {
    width: 100%;
    height: 2.4vh;
    height: 2.4svh;
    min-height: 1.851852vh;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50vh;
    outline: none;
    cursor: pointer;
    margin: 0;
   
}
/* 明度工具与预设颜色分区留白；底部操作仍沿用紧凑区域。 */
.color_value_slider + .color_palette {
    margin-top: 1.6vh;
    margin-top: 1.6svh;
}
.color_value_slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5vh;
    height: 1.5vh;
    min-width: 1.111111vh;
    min-height: 1.111111vh;
    border: 0.185185vh solid var(--control-handle-border);
    background: var(--color-selected, var(--theme-accent));
    border-radius: 50%;
    box-shadow: 0 0 0 0.092593vh var(--slider-outline);
   
}
.color_value_slider::-moz-range-thumb {
    width: 1.111111vh;
    height: 1.111111vh;
    border: 0.185185vh solid var(--control-handle-border);
    background: var(--color-selected, var(--theme-accent));
    border-radius: 50%;
   
}
.color_palette h3 {
    color: var(--theme-text);
    font-weight: 400;
    font-size: 1.7vh;
    line-height: 1.25;
    margin-bottom: 1.25vh;
    margin-bottom: 1.25svh;
   
}
.color_swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65vh;
   
}
.color_swatch {
    width: 2.7vh;
    height: 2.7vh;
    min-width: 1.851852vh;
    min-height: 1.851852vh;
    padding: 0;
    border: 0;
    border-radius: 0.5vh;
    cursor: pointer;
   
}
.color_swatch.active {
    outline: 0.185185vh solid var(--theme-text);
    outline-offset: 0.185185vh;
   
}
/* HEX、提示与操作作为一个紧凑区域，避免两次外层 gap 放大底部空白。 */
.color_footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.1vh;
    row-gap: 0.1svh;
    min-width: 0;
}
.color_hex_field {
    display: flex;
    background: rgba(var(--input-rgb), .22);
    border-radius: 0.8vh;
    overflow: hidden;
    width: 24vh;
    max-width: 100%;
    justify-self: center;
    min-width: 0;
    color: var(--theme-text);
    font-size: 1.8vh;
    align-items: center;
   
}
.color_hex_field > span {
    padding: 1vh 2vh;
    border-right: 0.092593vh solid rgba(var(--theme-ink-rgb), .3);
   
}
.color_hex_field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 1vh;
    color: inherit;
    text-align: center;
    font: inherit;
   
}
.color_hex_field:focus-within {
    box-shadow: 0 0 0 0.092593vh var(--theme-input-focus);
   
}
.color_hex_field input[aria-invalid="true"] {
    color: var(--error-text);
   
}
/* 两行提示在紧凑区域中固定占位，内容切换不推动按钮。 */
.color_message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--message-text);
    font-size: 1.35vh;
    line-height: 1.5;
    width: 30vh;
    width: 30svh;
    max-width: 100%;
    height: 3em;
    margin: 0;
    justify-self: center;
   
}
.color_message:empty {
    visibility: hidden;
   
}
.color_actions {
    display: flex;
    justify-content: space-between;
    gap: 2vh;
   
}
.color_actions button {
    border: 0;
    color: var(--theme-text);
    font: inherit;
    font-size: 1.8vh;
    border-radius: 50vh;
    padding: 1.2vh 3.3vh;
    cursor: pointer;
    background: rgba(var(--button-rgb), .2);
   
}
.color_actions [data-color-confirm] {
    color: var(--on-accent);
    flex: 1;
    background: var(--theme-accent);
    box-shadow: 0 0 1.5vh rgba(var(--theme-accent-rgb), .35);
   
}
.color_actions button:disabled {
    opacity: .4;
    cursor: default;
   
}
.color_editor button:focus-visible, .color_tabs button:focus-visible, .color_wheel_wrap canvas:focus-visible, .color_value_slider:focus-visible {
    outline: 0.185185vh solid var(--theme-bright);
    outline-offset: 0.37037vh;
   
}
.drawer_measure .color_editor {
    width: max-content;
    max-width: none;
   
}
.drawer_measure .color_swatches {
    flex-wrap: nowrap;
   
}

/* 场景与标注 */
.main_container{
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    background: linear-gradient(to top ,var(--scene-bottom),var(--scene-mid) var(--scene-mid-stop, 12%),var(--scene-top) var(--scene-high-stop, 30%));
    display: flex;
    justify-content: center;
}
.size_limit_container{
    position: absolute;
    width: 99%;
    height: 98.7%;
    bottom: 0;
    background: linear-gradient(to top ,var(--scene-bottom),var(--scene-mid) var(--scene-mid-stop, 12%),var(--scene-high) var(--scene-high-stop, 30%),var(--scene-fade) var(--scene-fade-stop, 80%),var(--surface-black));
    border-radius: 4vh 4vh 0 0;
    border-radius: 4lvh 4lvh 0 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#webgl_container{
    position: absolute;
    width: 100%;
    height: 100%;
}
.bg_en_name{
    position: absolute;
    font-weight: normal;
    font-size: var(--bg-fit-font-size, 34vh);
    color: var(--theme-text);
    line-height: 1;
    background: linear-gradient(180deg, var(--scene-word-top) 35%, var(--scene-word-bottom) 90%);
    opacity: 0.5;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 50%; top: 50%; white-space: nowrap; width: max-content;
    transform: translate(-50%, -80%);
    transform: translate(-50%, -50%) translate(var(--bg-position-x, 0vh), var(--bg-position-y, -30%)) scale(var(--bg-fit-scale, 1));
    will-change: transform;
}
/* CSS 变量中的单位也需要能力检测，避免旧内核接受 var() 后在计算阶段丢失 vh 回退。 */
@supports (height: 1svh) {
    .bg_en_name { font-size: var(--bg-fit-font-size, 34vh); font-size: var(--bg-fit-font-size, 34svh); }
}
/* =========================================================================
   【3D 展开结构动态标注 - 四向自适应极简工业版】
   ========================================================================= */
.annotation_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
    transform: translateZ(0);
    /* will-change: opacity;
    */
}

.annotation_layer.visible {
    opacity: 1;
}

/* SVG 连线画布 */
.annotation_svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* 0.092593vh 亚像素超平滑贝塞尔曲线 */
.annotation_svg path {
    fill: none;
    stroke: rgba(var(--theme-line-rgb), 0.9);
    stroke-width: 0.092593vh;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    filter: drop-shadow(0 0 0.092593vh rgba(var(--theme-line-rgb), 0.8));
    /* 透明度由 JS 统一淡入淡出；这里只过渡悬停颜色与线宽，避免两套动画叠加。 */
    transition: stroke .12s ease, stroke-width .12s ease;
}

/* 零件锚点微环 */
.annotation_anchor_dot {
    position: absolute;
    width: 0.555556vh;
    height: 0.555556vh;
    border-radius: 50%;
    border: 0.092593vh solid rgba(var(--theme-ink-rgb), 0.85);
    background: rgba(var(--theme-cyan-rgb), 0.9);
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-sizing: border-box;
    will-change: left, top, opacity;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* 悬浮文字胶囊：中心垂直水平智能居中锚定 */
.annotation_label_box {
    position: absolute;
    padding: 0.45vh 0.9vh;
    padding: 0.45svh 0.9svh;
    font-size: 1.2vh;
    border-radius: 50vh;
    color: var(--annotation-text);
    white-space: nowrap;
    background: var(--annotation-bg);
    /* backdrop-filter: blur(0.37037vh);
    -webkit-backdrop-filter: blur(0.37037vh);
    */
    border: 0.092593vh solid rgba(var(--theme-ink-rgb), 0.2);
    pointer-events: none;
    line-height: 1;
    transform: translate(-50%, -50%);
    /* 严格以自身几何中心平滑插值 */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    /* will-change: left, top, opacity;
    */
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* 拆解零件悬停：只改绘制颜色，不放大、不位移，保留原有排版、透视与距离显隐。 */
.annotation_label_box.is-part-hovered {
    color: var(--annotation-hover-text);
    background-color: var(--annotation-hover-bg);
    border-color: rgba(var(--theme-accent-rgb), .86);
    box-shadow: 0 0 .9vh rgba(var(--theme-accent-rgb), .24);
    
}
@supports (height: 1svh) {
    .annotation_label_box.is-part-hovered { box-shadow: 0 0 .9svh rgba(var(--theme-accent-rgb), .24); }
}

.annotation_svg path.is-part-hovered {
    stroke: var(--theme-hover-text);
    stroke-width: .14vh;
    stroke-width: .14svh;
}
.annotation_anchor_dot.is-part-hovered {
    background-color: var(--theme-accent);
    border-color: var(--theme-hover-text);
    box-shadow: 0 0 .7vh rgba(var(--theme-accent-rgb), .4);
    
}
@supports (height: 1svh) {
    .annotation_anchor_dot.is-part-hovered { box-shadow: 0 0 .7svh rgba(var(--theme-accent-rgb), .4); }
}

@media (prefers-reduced-motion: reduce) {
    .annotation_label_box, .annotation_anchor_dot, .annotation_svg path { transition-duration: .01ms; }
}



/* =========================================================================
   【3D 空间工程尺寸标注层】
   ========================================================================= */
   .dimension_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.dimension_layer.visible {
    opacity: 1;
    visibility: visible;
}

/* 尺寸数值悬浮胶囊 */
.dimension_badge {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0.6vh 1.4vh;
    padding: 0.6svh 1.4svh;
    font-size: 1.35vh;
    font-size: 1.35svh;
    border-radius: 50vh;
    background: rgba(var(--surface-rgb), 0.5);
    /* border: 0.092593vh solid rgba(var(--theme-bright-rgb), 0.2);
    */
    /* backdrop-filter: blur(0.37037vh);
    */
    /* -webkit-backdrop-filter: blur(0.37037vh);
    */
    color: var(--theme-text);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.6vh;
    gap: 0.6svh;
    pointer-events: none;
    user-select: none;
    will-change: left, top;
}

/* 长/宽/高类别前缀标签 */
.dimension_badge .dim_label {
    color: var(--dimension-label-color);
    font-weight: 600;
}

/* 尺寸数值 */
.dimension_badge .dim_val {
    color: var(--theme-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.046296vh;
}

/* 单位后缀 */
.dimension_badge .dim_unit {
    color: var(--muted-text);
    font-size: 1.1vh;
}

/* 全屏展厅手势隔离：锁住文档滚动，抽屉内部滚动和输入编辑仍可使用。
   body/主场景不建全屏 fixed 层，避免 Safari 把加载遮罩的颜色保留到浏览器栏。 */
html.viewer_page,
html.viewer_page body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: var(--viewer-browser-top, var(--scene-top));
}
html.viewer_page body {
    position: relative;
}
/* Safari 原生栏沿用旧版 html / body 的上下取色背景。
   上半部与页面顶边同色、下半部与页面底边同色，避免整块 body 的底色染到顶部。
   这里只绘制文档背景，不创建覆盖场景的补色条；所有颜色仍跟随当前主题 / 产品页 / AI 模式。 */
html.viewer_page.viewer_safari_ios body {
    background-color: var(--viewer-browser-bottom, var(--scene-bottom));
    min-height: 100vh;
    min-height: 100lvh;
    background-image: linear-gradient(to bottom,
        var(--viewer-browser-top, var(--scene-top)) 50%,
        var(--viewer-browser-bottom, var(--scene-bottom)) 50%);
}
/* WebKit 的原生栏另行读取贴边 fixed 元素的 computed background-color。
   body 渐变和 theme-color 不能代替这条取色路径。
   空节点配合 text 裁剪，保留不透明的计算色，但完全不绘制页面像素。
   请勿加入文字、伪元素、边框或阴影，也不要改成 opacity:0 / visibility:hidden。
   12px 是 WebKit 取色器要求超过 10 CSS 像素的内部门槛，不属于界面尺寸。 */
.viewer_browser_sample { display: none; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
    html.viewer_page.viewer_safari .viewer_browser_sample {
        display: block;
        position: fixed;
        left: 0; right: 0;
        width: 100%; height: 12px;
        margin: 0; padding: 0; border: 0; outline: 0;
        z-index: 2147483647;
        pointer-events: none;
        font-size: 0; line-height: 0;
        background-image: none;
        -webkit-background-clip: text;
        background-clip: text;
        box-shadow: none;
        transition: none;
    }
    html.viewer_page.viewer_safari .viewer_browser_sample_top {
        top: 0;
        background-color: var(--viewer-browser-top, var(--scene-top));
    }
    html.viewer_page.viewer_safari .viewer_browser_sample_bottom {
        bottom: 0;
        background-color: var(--viewer-browser-bottom, var(--scene-bottom));
    }
    /* 场景、主题或工具栏变化后只变更两帧几何，促使 WebKit 丢弃旧取色缓存。 */
    html.viewer_page.viewer_safari[data-browser-tint-refresh] .viewer_browser_sample { height: 13px; }
}
/* 浏览器边缘仅接收当前页面的同步结果；颜色仍在 theme.css 配置。
   场景用 scene-top / scene-bottom，产品页用 picker-top / picker-bottom。 */
/* 浏览器取色面直接使用目标色，不参与界面颜色补间，避免 Safari 缓存中途的蓝色。
   场景 / 面板仍沿用各自的日夜与 AI 淡化动画。 */
html.viewer_page, html.viewer_page body { transition: none; }
/* 浏览器取色背景直接跟随 AI 状态，避免 WebKit 保留之前的场景蓝。
   与可见的黑色场景遮罩使用同一个变量；产品 / 日夜主题色仍由 theme.css 管理。 */
html.viewer_page.smart-mode:not(.smart-closing),
html.viewer_page.smart-mode:not(.smart-closing) body { background-color: var(--smart-scene); }
html.viewer_page .main_container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    width: 100%;
    height: 100vh;
    height: var(--viewer-visual-height, 100vh);
    top: var(--viewer-visual-top, 0vh);
}
/* 无初始化变量时也使用当前视口；未知单位通过能力检测隔离，保留 vh 回退。 */
@supports (height: 100svh) {
    html.viewer_page .main_container {
        height: var(--viewer-visual-height, 100vh);
        
    }
@supports (height: 1svh) {
    html.viewer_page .main_container { height: var(--viewer-visual-height, 100svh); }
}

}
@supports (height: 100dvh) {
    html.viewer_page .main_container {
        height: var(--viewer-visual-height, 100vh);
        
    }
@supports (height: 1dvh) {
    html.viewer_page .main_container { height: var(--viewer-visual-height, 100dvh); }
}

}
html.viewer_page body,
html.viewer_page body * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
html.viewer_page img,
html.viewer_page a,
html.viewer_page svg,
html.viewer_page canvas {
    -webkit-user-drag: none;
   
}
html.viewer_page #webgl_container,
html.viewer_page #webgl_container canvas,
html.viewer_page .color_wheel_wrap canvas,
html.viewer_page input[type="range"] {
    touch-action: none;
    overscroll-behavior: none;
}
html.viewer_page .bg_en_name,
html.viewer_page .annotation_layer,
html.viewer_page .dimension_layer {
    pointer-events: none;
   
}
html.viewer_page .drawer_body {
    touch-action: pan-y;
    overscroll-behavior: contain;
}
html.viewer_page input:not([type="range"]),
html.viewer_page textarea,
html.viewer_page select,
html.viewer_page [contenteditable]:not([contenteditable="false"]) {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
    touch-action: manipulation;
}

/* 页面工具独立于场景内框，避免移动端内框高度影响顶部定位。 */
.viewer_tools {
    --tool-size: 2.8vh;
    position: absolute;
    z-index: 11;
    top: 4.8vh;
    top: 4.8svh;
    right: 6vh;
    right: 6svh;
    display: flex;
    align-items: center;
    gap: 1vh;
    gap: 1svh;
}
.viewer_tools .language_link,
.viewer_tools .settings_trigger {
    height: var(--tool-size);
    padding: 0;
    box-sizing: border-box;
    border: 0.08vh solid rgba(var(--theme-ink-rgb), 0.18);
    
    border-radius: 50vh;
    background: rgba(var(--tool-rgb), 0.28);
    color: var(--tool-text);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@supports (height: 1svh) {
    .viewer_tools .language_link,
.viewer_tools .settings_trigger { border: 0.08svh solid rgba(var(--theme-ink-rgb), 0.18); }
}

.viewer_tools .language_link {
    width: var(--tool-size);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.viewer_tools .iconfont { font-size: calc(var(--tool-size) * .65); line-height: 1; }
.viewer_tools .settings_trigger {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .6vh; gap: .6svh;
    padding: 0 .85vh; padding: 0 .85svh;
    font: inherit; font-size: calc(var(--tool-size) * .44); line-height: 1;
    white-space: nowrap; flex-shrink: 0;
}
.viewer_tools .settings_trigger > span { line-height: 1; flex-shrink: 0; }
.viewer_tools .settings_trigger svg { width: calc(var(--tool-size) * .65); height: calc(var(--tool-size) * .65); flex-shrink: 0; }
.viewer_tools a:focus-visible,
.viewer_tools button:focus-visible { outline: 0.15vh solid var(--theme-focus); outline-offset: 0.3vh; }
/* 自定义属性不会自动拒绝未知单位，因此 svh 版本也需要能力检测。 */
@supports (height: 1svh) {
    .viewer_tools {
        --tool-size: 2.8vh;
        --tool-size: 2.8svh;
    }
}

/* 悬停只用于可悬停的精确指针，触屏点击不保留 hover 高亮。 */
@media (hover: hover) and (pointer: fine) {
    .nav_bar .item[data-action] .iconfont,
    .nav_bar .item[data-action] .name,
    .menu_btn .item[data-action] .iconfont,
    .menu_btn .item[data-action] .name,
    .nav_bar .share_btn .iconfont,
    .nav_wrapper .color_tabs button,
    .nav_wrapper .panel_details .feature_list .title {
        transition: color .24s ease, text-shadow .24s ease;
    }
    .nav_bar .share_btn { cursor: pointer; }
    .panel_details [data-feature-index][aria-disabled="false"] .dot {
        transition: background-color .24s ease, box-shadow .24s ease;
    }
    .panel_details [data-feature-index][aria-disabled="false"]:not(.is-focused):hover .title {
        color: var(--theme-hover-text);
        text-shadow: 0 0 1.2vh rgba(var(--theme-glow-rgb), .3);
    }
    .panel_details [data-feature-index][aria-disabled="false"]:not(.is-focused):hover .dot {
        background: var(--theme-hover-text);
        box-shadow: 0 0 .8vh rgba(var(--theme-soft-rgb), .45);
    }
    .nav_bar .item[data-action]:not(.active):hover .iconfont,
    .nav_bar .item[data-action]:not(.active):hover .name,
    .menu_btn .item[data-action]:not(.active):hover .iconfont,
    .menu_btn .item[data-action]:not(.active):hover .name,
    .nav_bar .share_btn:hover .iconfont {
        color: var(--theme-hover-text);
        text-shadow: 0 0 1.2vh rgba(var(--theme-glow-rgb), .45);
    }
    .nav_bar .item[data-action].active:hover .iconfont,
    .nav_bar .item[data-action].active:hover .name {
        color: var(--theme-accent);
        text-shadow: 0 0 1.5vh rgba(var(--theme-accent-rgb), .95);
    }
    .nav_wrapper .drawer_close_btn:hover {
        background: rgba(var(--theme-cyan-rgb), .4);
        transform: rotate(90deg);
    }
    .nav_wrapper .color_tabs button:not(:disabled):not(.active):hover {
        color: var(--theme-hover-text);
        text-shadow: 0 0 1.4vh rgba(var(--theme-glow-rgb), .4);
    }
    .nav_wrapper .color_tabs button:not(:disabled).active:hover {
        text-shadow: 0 0 2.2vh rgba(var(--theme-glow-rgb), .8);
    }
    .nav_wrapper .color_swatch {
        transition: box-shadow .2s ease;
    }
    .nav_wrapper .color_swatch:not(:disabled):hover {
        box-shadow: 0 0 0 .185185vh rgba(var(--theme-ink-rgb), .65),
            0 0 1.2vh rgba(var(--theme-focus-rgb), .35);
    }
    .nav_wrapper .color_actions button,
    .viewer_tools .language_link,
    .viewer_tools .settings_trigger {
        transition: background-color .24s ease, border-color .24s ease,
            color .24s ease, box-shadow .24s ease;
    }
    .nav_wrapper .color_actions button:not(:disabled):hover {
        background: rgba(var(--button-rgb), .4);
    }
    .nav_wrapper .color_actions [data-color-confirm]:not(:disabled):hover {
        background: var(--theme-accent-hover);
        box-shadow: 0 0 2vh rgba(var(--theme-accent-rgb), .5);
    }
    .viewer_tools .language_link:hover,
    .viewer_tools .settings_trigger:hover {
        color: var(--theme-text);
        background: rgba(var(--tool-rgb), .42);
        border-color: rgba(var(--theme-soft-rgb), .65);
        box-shadow: 0 0 1.2vh rgba(var(--theme-glow-rgb), .18);
    }
    .panel_params .param_item {
        position: relative;
        isolation: isolate;
        transition: background-color .28s ease, border-color .28s ease;
    }
    .panel_params .param_item::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0; inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(circle at var(--param-pointer-x, 50%) var(--param-pointer-y, 50%),
            rgba(var(--theme-accent-rgb), .22), transparent 70%);
        opacity: 0;
        transition: opacity .32s ease;
    }
    .panel_params .param_item::after {
        content: "";
        position: absolute;
        left: 5.8vh;
        left: 5.8svh;
        bottom: 2.4vh;
        bottom: 2.4svh;
        width: 28%;
        height: .16vh;
        height: .16svh;
        background: var(--theme-accent);
        pointer-events: none;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    }
    .panel_params .param_label,
    .panel_params .param_value {
        transition: color .28s ease, text-shadow .28s ease;
    }
    .panel_params .param_item:hover {
        background: rgba(var(--theme-accent-rgb), .09);
        border-color: rgba(var(--theme-soft-rgb), .42);
    }
    .panel_params .param_item:hover::before { opacity: 1; }
    .panel_params .param_item:hover::after { transform: scaleX(1); }
    .panel_params .param_value { transform-origin: left center; }
    .panel_params .param_item:hover .param_label { color: var(--param-hover-label); }
    .panel_params .param_item:hover .param_value {
        color: var(--param-hover-value);
        text-shadow: 0 0 2vh rgba(var(--theme-accent-rgb), .5);
    }
}
@media (prefers-reduced-motion: reduce) {
    .nav_bar .item[data-action] .iconfont,
    .nav_bar .item[data-action] .name,
    .menu_btn .item[data-action] .iconfont,
    .menu_btn .item[data-action] .name,
    .nav_bar .share_btn .iconfont,
    .nav_wrapper .color_tabs button,
    .nav_wrapper .color_swatch,
    .nav_wrapper .color_actions button,
    .nav_wrapper .panel_details .feature_list .title,
    .nav_wrapper .panel_details .feature_list .dot,
    .viewer_tools .language_link,
    .viewer_tools .settings_trigger,
    .panel_params .param_item,
    .panel_params .param_label,
    .panel_params .param_value,
    .panel_params .param_item::before,
    .panel_params .param_item::after,
    .product_picker .language_link { transition: none; }
    .nav_wrapper .drawer_close_btn:hover { transform: none; }
}

/* 手机基础断点保留 996；1200 范围同时照顾近方形折叠屏和触控横屏。
   JS 直接读取 --viewer-dock，不再维护另一套设备/媒体查询判断。 */
@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    .viewer_tools {
        --tool-size: 4.2vh; 
        top: 3.8vh;
        top: 3.8svh;
        right: auto;
        left: 2.6vh;
        left: 2.6svh;
    }
    @supports (width: max(1vh, 1vw)) {
        .viewer_tools { --tool-size: max(4.2vh, 4.6vw); }
    }

    @supports (height: 1svh) {
        .viewer_tools {
            --tool-size: 4.2vh; 
            --tool-size: 4.2vh; 
        }
        @supports (width: max(1vh, 1vw)) {
            .viewer_tools { --tool-size: max(4.2vh, 4.6vw); --tool-size: max(4.2svh, 4.6vw); }
        }
    }
    .viewer_tools .language_link { display: none; }
    /* 只由 html / body 背景供浏览器原生栏取色，不在页面内创建固定补色层。 */
    .size_limit_container {
        width: 100%;
        border-radius: 2vh 2vh 0 0;
        border-radius: 2lvh 2lvh 0 0;
    }
    .nav_wrapper {
        --viewer-dock: bottom;
        left: 4%;
        top: auto;
        bottom: 1.6vh;
        bottom: 1.6svh;
        width: 92%;
        max-width: none;
        height: auto;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0;
        box-sizing: border-box;
        border: 0.1vh solid rgba(var(--nav-border-rgb), 0.35);
        
        background: linear-gradient(to bottom, var(--nav-top), var(--nav-mid));
        overflow: hidden;
        border-radius: 4vh;
        border-radius: 4svh;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
@supports (height: 1svh) {
    .nav_wrapper { border: 0.1svh solid rgba(var(--nav-border-rgb), 0.35); }
}

    .nav_bar {
        position: relative;
        width: 100%;
        height: 8.4vh; height: max(8.4vh, 5.7vw);
        height: 8.4vh; height: max(8.4svh, 5.7vw);
        flex-direction: row;
        border: none;
        border-radius: 0;
        background: none;
        box-sizing: border-box;
    }
    .nav_bar .logo { display: none; }
    .nav_bar .nav_list {
        width: 100%;
        height: 100%;
        flex-direction: row;
        justify-content: space-around;
        gap: 0;
        padding: 0.35vh;
        padding: 0.35svh;
        box-sizing: border-box;
    }
    .nav_bar .nav_list .item {
        flex: 1;
        justify-content: center;
        gap: 0.6vh;
        gap: 0.6svh;
        border-radius: 50vh;
        min-width: 0;
    }
    .nav_bar .nav_list .item.active { background: rgba(var(--nav-selected-rgb), 0.22); }
    .nav_bar .iconfont, .menu_btn .iconfont {
        font-size: 2.4vh; font-size: max(2.4vh, 2.2vw);
        font-size: 2.4vh; font-size: max(2.4svh, 2.2vw);
        line-height: 1;
    }
    .nav_bar .item .name, .menu_btn .item .name {
        font-size: 1.4vh; font-size: max(1.4vh, 1.2vw);
        font-size: 1.4vh; font-size: max(1.4svh, 1.2vw);
        line-height: 1.2;
    }
    /* 挂在场景外层，和底部导航脱离；基础定位只用普通长度。 */
    .menu_btn {
        --tool-size: 4.2vh; 
        position: absolute;
        z-index: 11;
        pointer-events: auto;
        top: 3.8vh;
        top: 3.8svh;
        right: 2.6vh;
        right: 2.6svh;
        bottom: auto;
        left: auto;
    }
@supports (width: max(1vh, 1vw)) {
    .menu_btn { --tool-size: max(4.2vh, 4.6vw); }
}

    /* 移动端顶部两个入口共用排版：按钮高度、内边距、图标与文字间距保持一致。 */
    .menu_btn .item,
    .viewer_tools .settings_trigger {
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: .35vh;
        gap: .35svh;
        width: auto;
        min-width: var(--tool-size);
        height: var(--tool-size);
        padding: .8vh .9vh;
        padding: .8svh .9svh;
        box-sizing: border-box;
        border: .08vh solid rgba(var(--theme-ink-rgb), .18);
        
        border-radius: 50vh;
        background: rgba(var(--tool-rgb), .28);
        color: var(--tool-text);
        font: inherit;
        font-size: 1.5vh; font-size: max(1.5vh, 1.25vw);
        font-size: 1.5vh; font-size: max(1.5svh, 1.25vw);
        line-height: 1;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
@supports (height: 1svh) {
    .menu_btn .item,
    .viewer_tools .settings_trigger { border: .08svh solid rgba(var(--theme-ink-rgb), .18); }
}

    @supports (height: 1svh) {
        .menu_btn { --tool-size: 4.2vh;  --tool-size: 4.2vh;  }
@supports (width: max(1vh, 1vw)) {
    .menu_btn { --tool-size: max(4.2vh, 4.6vw); --tool-size: max(4.2svh, 4.6vw); }
}

    }
    /* 字体图标与 SVG 都使用相同的方形区域，避免字体基线和自然字宽影响对齐。 */
    .menu_btn .item .iconfont,
    .viewer_tools .settings_trigger svg {
        display: block;
        flex-shrink: 0;
        width: 1.7vh; width: max(1.7vh, 1.6vw);
        width: 1.7vh; width: max(1.7svh, 1.6vw);
        height: 1.7vh; height: max(1.7vh, 1.6vw);
        height: 1.7vh; height: max(1.7svh, 1.6vw);
        color: var(--theme-hover-text);
    }
    .menu_btn .item .iconfont {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7vh; font-size: max(1.7vh, 1.6vw);
        font-size: 1.7vh; font-size: max(1.7svh, 1.6vw);
        line-height: 1;
    }
    .menu_btn .item .name,
    .viewer_tools .settings_trigger > span {
        flex-shrink: 0;
        white-space: nowrap;
        font: inherit;
        line-height: 1;
        color: inherit;
    }
    .nav_bar .share_btn {
        display: none;
    }
    .main_container {
        --product-title-medium-edge: 1.2vh; /* 中等形态按钮距屏幕左右边缘的距离。 */
        --product-title-medium-padding-y: .4vh; /* 中等形态按钮上下内边距。 */
        --product-title-medium-button-height: 3.2vh; /* 中等形态按钮最小高度，内容更高时自动撑开。 */
    }
    @supports (height: 1svh) {
        .main_container {
            --product-title-medium-edge: 1.2svh;
            --product-title-medium-padding-y: .4svh;
            --product-title-medium-button-height: 3.2svh;
        }
    }
    .product_name_container {
        --product-title-full-row-enabled: 1;
        --product-title-wing: 3.5vh;
        --product-title-overlap: .2vh;
        --product-title-width-limit: 100%;
        --product-title-controls-gap: .2; /* 普通标题与左右按钮保留少量空间，优先完整显示单行文字。 */
        --product-title-full-row-gap: 4px; /* 固定两翼距按钮不足此净空时，短标题切为整行形态。 */
        --product-title-row-text-gap: 8px; /* 整行文字距任一侧按钮至少保留此净空，否则按钮排到下方。 */
        --product-title-min-wing-scale: 1; /* 移动端两侧内边距固定，不随文字变长缩小。 */
        top: 0;
    }
    /* 普通标题始终单行，只有通栏状态允许换行；不缩字、不截断产品名称。 */
    .product_name_container:not(.is-full-row) .name {
        white-space: nowrap; overflow-wrap: normal;
    }
    /* 中 / 长标题使用整行矩形背景，沿用原来的主题色过渡。 */
    .product_name_container.is-full-row { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
    .product_name_container.is-full-row .name {
        display: block; width: 100%; margin: 0; padding-left: 1.3vh; padding-right: 1.3vh;
        white-space: normal; overflow-wrap: break-word; overflow-wrap: anywhere;
    }
    .product_name_container.is-full-row.is-medium-row .name { white-space: nowrap; overflow-wrap: normal; }
    /* 中等标题保留文字原来的顶部位置，两个按钮上移并与文字中心对齐。 */
    .main_container.has-medium-product-title > .viewer_tools,
    .main_container.has-medium-product-title > .menu_btn { top: var(--product-title-medium-controls-top); }
    .main_container.has-medium-product-title > .viewer_tools { left: var(--product-title-medium-edge); }
    .main_container.has-medium-product-title > .menu_btn { right: var(--product-title-medium-edge); }
    .main_container.has-medium-product-title > .viewer_tools .settings_trigger,
    .main_container.has-medium-product-title > .menu_btn .item {
        height: auto;
        min-height: var(--product-title-medium-button-height);
        padding-top: var(--product-title-medium-padding-y);
        padding-bottom: var(--product-title-medium-padding-y);
    }
    @supports (left: calc(1vh + env(safe-area-inset-left, 0vh))) {
        html.viewer_safe_area .main_container.has-medium-product-title > .viewer_tools {
            left: calc(var(--product-title-medium-edge) + env(safe-area-inset-left, 0vh));
        }
        html.viewer_safe_area .main_container.has-medium-product-title > .menu_btn {
            right: calc(var(--product-title-medium-edge) + env(safe-area-inset-right, 0vh));
        }
    }
    .main_container.has-long-product-title > .viewer_tools,
    .main_container.has-long-product-title > .menu_btn { top: var(--product-title-long-controls-top); }
    .main_container.has-long-product-title > .part_inspector { top: var(--product-title-following-top); }
    @supports (height: 1svh) {
        .product_name_container.is-full-row .name { padding-left: 1.3svh; padding-right: 1.3svh; }
    }
    @supports (padding-left: calc(1vh + env(safe-area-inset-left, 0vh))) {
        html.viewer_safe_area .product_name_container.is-full-row .name {
            padding-left: calc(1.3vh + env(safe-area-inset-left, 0vh));
            padding-right: calc(1.3vh + env(safe-area-inset-right, 0vh));
        }
        @supports (height: 1svh) {
            html.viewer_safe_area .product_name_container.is-full-row .name {
                padding-left: calc(1.3svh + env(safe-area-inset-left, 0vh));
                padding-right: calc(1.3svh + env(safe-area-inset-right, 0vh));
            }
        }
    }
    @supports (height: 1svh) {
        .product_name_container {
            --product-title-wing: 3.5vh; --product-title-wing: 3.5svh;
            --product-title-overlap: .2vh; --product-title-overlap: .2svh;
        }
    }
    /* 基础移动端定位不依赖 env；通过运行时校验的浏览器才启用安全区。
       安卓百度保持基础版，避免不完整的 env 实现将 top/bottom 算成 auto。 */
    @supports (top: calc(1vh + env(safe-area-inset-top, 0vh))) {
        html.viewer_safe_area .viewer_tools {
            top: calc(3.8vh + env(safe-area-inset-top, 0vh));
            
            left: calc(2.6vh + env(safe-area-inset-left, 0vh));
            
        }
@supports (height: 1svh) {
    html.viewer_safe_area .viewer_tools { top: calc(3.8svh + env(safe-area-inset-top, 0vh)); left: calc(2.6svh + env(safe-area-inset-left, 0vh)); }
}

        html.viewer_safe_area .nav_wrapper {
            bottom: calc(1.6vh + env(safe-area-inset-bottom, 0vh));
            
        }
@supports (height: 1svh) {
    html.viewer_safe_area .nav_wrapper { bottom: calc(1.6svh + env(safe-area-inset-bottom, 0vh)); }
}

        html.viewer_safe_area .menu_btn {
            top: calc(3.8vh + env(safe-area-inset-top, 0vh));
            
            right: calc(2.6vh + env(safe-area-inset-right, 0vh));
            
        }
@supports (height: 1svh) {
    html.viewer_safe_area .menu_btn { top: calc(3.8svh + env(safe-area-inset-top, 0vh)); right: calc(2.6svh + env(safe-area-inset-right, 0vh)); }
}

        html.viewer_safe_area .product_name_container {
            top: env(safe-area-inset-top, 0vh);
        }
    }
    .product_name_container .name {
        position: relative;
        z-index: 1;
        font-size: 2.1vh; font-size: max(2.1vh, 1.4vw);
        font-size: 2.1vh; font-size: max(2.1svh, 1.4vw);
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 1.4vh;
        padding-bottom: 1.4svh;
        white-space: nowrap;
        text-align: center;
        line-height: 1.3;
    }
    .bg_en_name {
        font-size: var(--bg-fit-font-size, 34vh); 
    }
@supports (width: min(1vh, 1vw)) {
    .bg_en_name { font-size: var(--bg-fit-font-size, min(34vh, 48vw)); }
}

    @supports (height: 1svh) {
        .bg_en_name { font-size: var(--bg-fit-font-size, 34vh);  font-size: var(--bg-fit-font-size, 34vh);  }
@supports (width: min(1vh, 1vw)) {
    .bg_en_name { font-size: var(--bg-fit-font-size, min(34vh, 48vw)); font-size: var(--bg-fit-font-size, min(34svh, 48vw)); }
}

    }
    .nav_drawer {
        width: 100%;
        height: 0;
        margin: 0;
        flex-shrink: 0;
        border-radius: 0;
        background: none;
        transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    }
    .nav_drawer.open { width: 100%; height: var(--drawer-content-height, 0vh); }
    .drawer_inner {
        width: 100% !important;
        height: var(--drawer-content-height, auto);
        max-height: var(--drawer-cap-height, 56vh);
    }
    .nav_drawer[data-active-panel="params"], .nav_drawer[data-active-panel="details"] {
        --drawer-height-ratio: 0.44;
    }
    .nav_drawer[data-active-panel="params"] .drawer_header,
    .nav_drawer[data-active-panel="details"] .drawer_header {
        height: auto;
        min-height: 4.6vh; min-height: max(4.6vh, 4.8vw);
        min-height: 4.6vh; min-height: max(4.6svh, 4.8vw);
        flex-shrink: 0;
    }
    .nav_drawer[data-active-panel="params"] .panel_main_title,
    .nav_drawer[data-active-panel="details"] .panel_main_title {
        height: auto;
        flex-shrink: 0;
        font-size: 3.2vh; font-size: max(3.2vh, 2.8vw);
        font-size: 3.2vh; font-size: max(3.2svh, 2.8vw);
        line-height: 1.2;
        padding: 0 2.4vh 1.8vh;
        padding: 0 2.4svh 1.8svh;
    }
    .nav_drawer[data-active-panel="params"] .drawer_body,
    .nav_drawer[data-active-panel="details"] .drawer_body {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .nav_drawer[data-active-panel="details"] .drawer_body {
        margin-right: 0;
        scrollbar-gutter: auto;
    }
    .nav_drawer[data-active-panel="details"] .drawer_body::-webkit-scrollbar-track {
        margin-top: 1.2vh;
        margin-top: 1.2svh;
        margin-bottom: 1.2vh;
        margin-bottom: 1.2svh;
    }
    .panel_details {
        width: 100%;
        max-width: 100%;
    }
    .panel_details .detail_section {
        padding: 2.4vh;
        padding: 2.4svh;
    }
    .panel_details .section_subtitle {
        margin-bottom: 1.8vh;
        margin-bottom: 1.8svh;
        font-size: 1.7vh; font-size: max(1.7vh, 3.4vmin);
        font-size: 1.7vh; font-size: max(1.7svh, 3.4vmin);
    }
    .panel_details .feature_list {
        gap: 2.2vh;
        gap: 2.2svh;
    }
    .panel_details .feature_list li {
        gap: 1.2vh;
        gap: 1.2svh;
    }
    .panel_details .feature_list .text_box {
        flex: 1;
        max-width: none;
    }
    .panel_details .feature_list .dot {
        width: 0.6vh; width: max(0.6vh, 1vmin);
        width: 0.6vh; width: max(0.6svh, 1vmin);
        height: 0.6vh; height: max(0.6vh, 1vmin);
        height: 0.6vh; height: max(0.6svh, 1vmin);
        margin-top: 0.7vh; margin-top: max(0.7vh, 1.8vmin);
        margin-top: 0.7vh; margin-top: max(0.7svh, 1.8vmin);
    }
    .panel_details .feature_list .title {
        margin-bottom: 0.7vh;
        margin-bottom: 0.7svh;
        font-size: 1.8vh; font-size: max(1.8vh, 3.8vmin);
        font-size: 1.8vh; font-size: max(1.8svh, 3.8vmin);
        line-height: 1.4;
    }
    .panel_details .feature_list .desc {
        font-size: 1.65vh; font-size: max(1.65vh, 3.6vmin);
        font-size: 1.65vh; font-size: max(1.65svh, 3.6vmin);
        line-height: 1.55;
    }
    .panel_params { height: auto; }
    .params_grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        min-height: 0;
    }
    .param_item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.2vh 2.4vh;
        padding: 1.2svh 2.4svh;
        gap: 1.6vh;
        gap: 1.6svh;
    }
    .param_label {
        font-size: 1.6vh; font-size: max(1.6vh, 1.6vw);
        font-size: 1.6vh; font-size: max(1.6svh, 1.6vw);
    }
    .param_value {
        justify-content: flex-end;
        text-align: right;
        font-size: 2.7vh; font-size: max(2.7vh, 2.3vw);
        font-size: 2.7vh; font-size: max(2.7svh, 2.3vw);
    }
    .drawer_close_btn {
        top: 1vh;
        top: 1svh;
        right: 1.8vh;
        right: 1.8svh;
        width: 3.6vh; width: max(3.6vh, 3.6vw);
        width: 3.6vh; width: max(3.6svh, 3.6vw);
        height: 3.6vh; height: max(3.6vh, 3.6vw);
        height: 3.6vh; height: max(3.6svh, 3.6vw);
    }
    .drawer_close_btn .close_icon {
        font-size: 1.3vh; font-size: max(1.3vh, 1.5vw);
        font-size: 1.3vh; font-size: max(1.3svh, 1.5vw);
    }
    .nav_drawer[data-active-panel="color"] .drawer_header {
        height: auto;
        min-height: 5.6vh; min-height: max(5.6vh, 4.8vw);
        min-height: 5.6vh; min-height: max(5.6svh, 4.8vw);
        padding: 1vh 7vh 0.5vh 2.4vh;
        padding: 1svh 7svh 0.5svh 2.4svh;
    }
    .color_tabs {
        gap: 1.8vh;
        gap: 1.8svh;
    }
    .color_tabs button {
        font-size: 1.8vh; font-size: max(1.8vh, 1.3vw);
        font-size: 1.8vh; font-size: max(1.8svh, 1.3vw);
        padding: 0.5vh 0;
        padding: 0.5svh 0;
        line-height: 1.3;
    }
    .nav_drawer[data-active-panel="color"] .drawer_body {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.8vh 2.4vh 1.2vh;
        padding: 0.8svh 2.4svh 1.2svh;
        overflow-x: hidden;
        scrollbar-width: none;
    }
    .nav_drawer[data-active-panel="color"] .drawer_body::-webkit-scrollbar { width: 0; height: 0; }
    .color_editor {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "wheel presets" "wheel custom" "wheel hex" "lightness actions" "message message";
        column-gap: 2.3vh;
        column-gap: 2.3svh;
        row-gap: 0.9vh;
        row-gap: 0.9svh;
        align-items: center;
    }
    .color_wheel_wrap {
        grid-area: wheel;
        width: 100%;
        max-width: 22vh;
        max-width: 22svh;
        align-self: center;
    }
    .color_value_slider {
        grid-area: lightness;
        justify-self: center;
        max-width: 22vh;
        max-width: 22svh;
        height: 2.4vh; height: max(2.4vh, 1.8vw);
        height: 2.4vh; height: max(2.4svh, 1.8vw);
        min-height: 0;
    }
    .color_value_slider + .color_palette { grid-area: presets; margin: 0; }
    .color_palette + .color_palette { grid-area: custom; }
    .color_palette h3 {
        font-size: 1.7vh; font-size: max(1.7vh, 1.5vw);
        font-size: 1.7vh; font-size: max(1.7svh, 1.5vw);
        margin-bottom: 0.8vh;
        margin-bottom: 0.8svh;
    }
    .color_swatches {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        max-width: 20vh; max-width: max(20vh, 20vw);
        max-width: 20vh; max-width: max(20svh, 20vw);
        gap: 0.6vh;
        gap: 0.6svh;
    }
    .color_swatch {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        min-width: 0;
        min-height: 0;
    }
    .color_marker {
        width: 1.5vh; width: max(1.5vh, 1.7vw);
        width: 1.5vh; width: max(1.5svh, 1.7vw);
        height: 1.5vh; height: max(1.5vh, 1.7vw);
        height: 1.5vh; height: max(1.5svh, 1.7vw);
        min-width: 0;
        min-height: 0;
    }
    .color_value_slider::-webkit-slider-thumb {
        width: 1.5vh; width: max(1.5vh, 1.7vw);
        width: 1.5vh; width: max(1.5svh, 1.7vw);
        height: 1.5vh; height: max(1.5vh, 1.7vw);
        height: 1.5vh; height: max(1.5svh, 1.7vw);
        min-width: 0;
        min-height: 0;
    }
    .color_value_slider::-moz-range-thumb {
        width: 1.5vh; width: max(1.5vh, 1.7vw);
        width: 1.5vh; width: max(1.5svh, 1.7vw);
        height: 1.5vh; height: max(1.5vh, 1.7vw);
        height: 1.5vh; height: max(1.5svh, 1.7vw);
    }
    .color_footer { display: contents; }
    .color_hex_field {
        grid-area: hex;
        justify-self: stretch;
        width: 100%;
        font-size: 1.7vh; font-size: max(1.7vh, 1.3vw);
        font-size: 1.7vh; font-size: max(1.7svh, 1.3vw);
    }
    .color_hex_field > span {
        padding: 1vh 1.7vh;
        padding: 1svh 1.7svh;
    }
    .color_hex_field input {
        padding: 1vh 0.6vh;
        padding: 1svh 0.6svh;
    }
    .color_actions {
        grid-area: actions;
        gap: 0.8vh;
        gap: 0.8svh;
    }
    .color_actions button {
        flex: 1;
        padding: 1vh 0;
        padding: 1svh 0;
        font-size: 1.9vh; font-size: max(1.9vh, 1.5vw);
        font-size: 1.9vh; font-size: max(1.9svh, 1.5vw);
        white-space: nowrap;
    }
    .color_message {
        grid-area: message;
        width: 100%;
        font-size: 1.25vh; font-size: max(1.25vh, 1.1vw);
        font-size: 1.25vh; font-size: max(1.25svh, 1.1vw);
    }
}

/* 短横屏仍沿用底部抽屉；现有颜色工具排成三列，给场景保留上方空间。 */
@media (max-width: 996px) and (max-height: 540px) and (orientation: landscape), (max-width: 1200px) and (max-height: 540px) and (pointer: coarse) {
    .nav_drawer[data-active-panel="params"], .nav_drawer[data-active-panel="details"] {
        --drawer-height-ratio: 0.64;
    }
    .color_editor {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "wheel presets custom" "lightness hex actions" "message message message";
    }
    [data-custom-colors] { display: flex; flex-wrap: nowrap; max-width: 100%; }
    [data-custom-colors] .color_swatch { flex: 1 1 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .nav_drawer, .drawer_inner { transition: none; }
}

/* 零件详情：一个胶囊外壳变宽并向下展开，不额外挂接下拉卡片。 */
.part_inspector {
    position: absolute;
    z-index: 14;
    top: var(--parts-row-top, 9vh);
    
    right: 6vh;
    right: 6svh;
    color: var(--theme-text);
    font-size: 1.4vh;
    font-size: 1.4svh;
    max-width: 86vw;
}
@supports (height: 1svh) {
    .part_inspector { top: var(--parts-row-top, 9svh); }
}

.parts_island {
    width: 12vh;
    width: 12svh;
    max-width: 86vw;
    box-sizing: border-box;
    overflow: hidden;
    border: .08vh solid rgba(var(--nav-border-rgb), .28);
    
    border-radius: 3vh;
    border-radius: 3svh;
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), .13), rgba(var(--theme-accent-rgb), .025)), var(--title-background);
    box-shadow: 0 .6vh 2.2vh rgba(var(--shadow-rgb), .16);
    transition: width .42s cubic-bezier(.22, 1, .36, 1), border-radius .42s ease, border-color .22s ease, box-shadow .3s ease;
}
@supports (height: 1svh) {
    .parts_island { border: .08svh solid rgba(var(--nav-border-rgb), .28); }
}

.part_inspector.is-isolated .parts_island { width: 22vh; width: 22svh; }
.part_inspector.is-open .parts_island { width: 30vh; width: 30svh; border-radius: 2.4vh; border-radius: 2.4svh; border-color: rgba(var(--nav-border-rgb), .4); box-shadow: 0 1.4vh 4vh rgba(var(--shadow-rgb), .2); }
.part_toolbar { display: flex; align-items: stretch; min-width: 0; }
.part_toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8vh;
    gap: .8svh;
    height: var(--parts-control-height, 4.5vh);
    
    padding: 0 1.5vh;
    padding: 0 1.5svh;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, background-color .2s ease;
}
@supports (height: 1svh) {
    .part_toolbar button { height: var(--parts-control-height, 4.5svh); }
}

.part_toolbar button:disabled { opacity: .4; cursor: default; }
.part_toolbar [hidden] { display: none; }
.part_toolbar .parts_toggle { flex: 1; justify-content: flex-start; min-width: 0; }
.part_toolbar svg { flex: 0 0 auto; width: 1.8vh; width: 1.8svh; height: 1.8vh; height: 1.8svh; stroke-linecap: round; stroke-linejoin: round; }
.parts_toggle .parts_cube { color: var(--theme-bright); }
.parts_toggle .parts_chevron { width: 1.3vh; width: 1.3svh; height: 1.3vh; height: 1.3svh; margin-left: auto; opacity: .65; transition: transform .32s ease; }
.part_inspector.is-open .parts_chevron { transform: rotate(180deg); }
.part_toolbar .parts_exit { flex: 0 0 auto; border-left: .08vh solid rgba(var(--nav-border-rgb), .22); color: var(--theme-bright); }
.parts_popup {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1), opacity .22s ease, visibility .4s;
}
.parts_popup_inner { min-height: 0; overflow: hidden; }
.parts_popup_content { padding: .3vh 1vh 1.1vh; padding: .3svh 1svh 1.1svh; }
.part_inspector.is-open .parts_popup { grid-template-rows: 1fr; opacity: 1; visibility: visible; pointer-events: auto; }
.parts_hint { margin: 0 .7vh .8vh; margin: 0 .7svh .8svh; padding-top: 1vh; padding-top: 1svh; border-top: .08vh solid rgba(var(--nav-border-rgb), .15); font-size: .85em; color: var(--muted-text); }
.parts_list { max-height: 44vh; max-height: 44svh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--muted-text) transparent; }
.part_option {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 1.1vh;
    border-radius: 1.1svh;
    padding: 1.1vh 1.1vh;
    padding: 1.1svh 1.1svh;
    text-align: left;
    font: inherit;
    line-height: 1.5;
    background: transparent;
    color: inherit;
    cursor: pointer;
    touch-action: pan-y;
    transition: color .18s ease, background-color .18s ease;
}
.part_option[aria-pressed="true"] { background: var(--theme-accent); color: var(--on-accent); }
.part_inspector button:focus-visible { outline: .15vh solid var(--theme-focus); outline-offset: -.3vh; }
.part_inspector[data-input-mode="pointer"] button:focus { outline: none; }
.nav_wrapper { transition: opacity .28s ease, transform .28s ease; }
html.part-isolated .nav_wrapper { opacity: 0; transform: translateX(-2vh); transform: translateX(-2svh); }
html.part-isolated .variant_picker { opacity: 0; }
html.part-isolated .nav_wrapper, html.part-isolated .nav_wrapper *, html.part-isolated .variant_picker, html.part-isolated .variant_picker * { pointer-events: none !important; }
html.part-isolated:not(.smart-mode) .annotation_layer, html.part-isolated:not(.smart-mode) .annotation_layer *,
html.part-isolated .dimension_layer, html.part-isolated .dimension_layer * { visibility: hidden !important; }
@media (hover: hover) and (pointer: fine) {
    .part_toolbar button:not(:disabled):hover { background: rgba(var(--theme-accent-rgb), .14); }
    .part_option:not([aria-pressed="true"]):hover { color: var(--theme-bright); background: rgba(var(--theme-accent-rgb), .17); }
}
@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    /* 移动端隔离零件时隐藏产品入口，退出隔离后自动恢复。 */
    html.part-isolated .menu_btn { display: none; }
    .part_inspector { top: var(--parts-row-top, 10.5vh);  right: 2.6vh; right: 2.6svh; font-size: 1.55vh; font-size: 1.55svh; }
@supports (height: 1svh) {
    .part_inspector { top: var(--parts-row-top, 10.5svh); }
}

    .part_toolbar button { height: var(--parts-control-height, 4.7vh);  padding: 0 1.5vh; padding: 0 1.5svh; }
@supports (height: 1svh) {
    .part_toolbar button { height: var(--parts-control-height, 4.7svh); }
}

    .part_inspector.is-open .parts_island { width: 31vh; width: 31svh; }
    .parts_list { max-height: 43vh; max-height: 43svh; }
    @supports (top: calc(1vh + env(safe-area-inset-top, 0vh))) {
        html.viewer_safe_area .part_inspector { top: var(--parts-row-top, calc(10.5vh + env(safe-area-inset-top, 0vh)));  }
@supports (height: 1svh) {
    html.viewer_safe_area .part_inspector { top: var(--parts-row-top, calc(10.5svh + env(safe-area-inset-top, 0vh))); }
}

    }
}
@media (prefers-reduced-motion: reduce) {
    .part_inspector *, .nav_wrapper { transition-duration: .01ms !important; }
}

/* 设置弹窗：颜色全部复用头部 theme.css 的变量，日夜 / 消防系列无需另一套色值。 */
.settings_modal {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 180;
    display: flex; align-items: center; justify-content: center;
    padding: 3vh; padding: 3svh; box-sizing: border-box;
    background: rgba(var(--shadow-rgb), .42);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}
.settings_modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.settings_dialog {
    display: flex; flex-direction: column; min-height: 0;
    width: 56vh; width: 56svh; max-width: 100%; max-height: 100%;
    box-sizing: border-box; overflow: hidden;
    border: .1vh solid rgba(var(--nav-border-rgb), .3);
    
    border-radius: 2.6vh; border-radius: 2.6svh;
    background-color: var(--title-background); color: var(--theme-text);
    box-shadow: 0 2vh 8vh rgba(var(--shadow-rgb), .32);
    
    font-size: 1.6vh; font-size: 1.6svh;
    transform: translateY(1.4vh) scale(.98); transform: translateY(1.4svh) scale(.98);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
@supports (height: 1svh) {
    .settings_dialog { border: .1svh solid rgba(var(--nav-border-rgb), .3); box-shadow: 0 2svh 8svh rgba(var(--shadow-rgb), .32); }
}

.settings_modal.is-open .settings_dialog { transform: translateY(0) scale(1); }
.settings_header {
    display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
    padding: 2.8vh 3vh 2.2vh; padding: 2.8svh 3svh 2.2svh;
    border-bottom: .1vh solid rgba(var(--nav-border-rgb), .16);
    
}
@supports (height: 1svh) {
    .settings_header { border-bottom: .1svh solid rgba(var(--nav-border-rgb), .16); }
}

.settings_header h2 { font-size: 2.6vh; font-size: 2.6svh; font-weight: 500; line-height: 1.35; }
.settings_header p { margin-top: .5vh; margin-top: .5svh; color: var(--muted-text); font-size: .86em; }
.settings_close {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 3.8vh; width: 3.8svh; height: 3.8vh; height: 3.8svh;
    border: 0; border-radius: 50%; background: rgba(var(--tool-rgb), .18);
    color: var(--tool-text); cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease;
}
.settings_close svg { width: 55%; height: 55%; }
.settings_body {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: .5vh 3vh 1.4vh; padding: .5svh 3svh 1.4svh;
    scrollbar-width: thin; scrollbar-color: var(--muted-text) transparent;
}
.settings_row { display: flex; align-items: center; justify-content: space-between; gap: 2vh; gap: 2svh; padding: 2.4vh 0; padding: 2.4svh 0; }
.settings_row h3, .settings_quality h3 { font-size: 1em; font-weight: 500; line-height: 1.5; }
.settings_row p { color: var(--muted-text); font-size: .82em; margin-top: .5vh; margin-top: .5svh; }
.settings_switch {
    position: relative; flex: 0 0 auto; width: 5.5vh; width: 5.5svh; height: 3.2vh; height: 3.2svh;
    border: .1vh solid rgba(var(--nav-border-rgb), .24);
    
    border-radius: 50vh; background: rgba(var(--tool-rgb), .28);
    color: var(--tool-text); cursor: pointer; box-sizing: border-box;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color .22s ease, border-color .22s ease;
}
@supports (height: 1svh) {
    .settings_switch { border: .1svh solid rgba(var(--nav-border-rgb), .24); }
}

.settings_switch_thumb {
    position: absolute; top: .3vh; top: .3svh; left: .3vh; left: .3svh;
    display: flex; align-items: center; justify-content: center;
    width: 2.4vh; width: 2.4svh; height: 2.4vh; height: 2.4svh;
    border-radius: 50%; background: var(--tool-text); color: var(--theme-accent);
    transition: transform .24s ease, background-color .24s ease;
}
.settings_switch_thumb .iconfont { font-size: 1.65vh; font-size: 1.65svh; line-height: 1; }
.settings_switch[aria-checked="true"] { background-color: var(--theme-accent); border-color: var(--theme-accent); }
.settings_switch[aria-checked="true"] .settings_switch_thumb {
    transform: translateX(2.3vh); transform: translateX(2.3svh); background-color: var(--on-accent);
}
.settings_quality {
    padding: 2.4vh 0; padding: 2.4svh 0;
    border-top: .1vh solid rgba(var(--nav-border-rgb), .16); border-bottom: .1vh solid rgba(var(--nav-border-rgb), .16); border-block: .1vh solid rgba(var(--nav-border-rgb), .16);
    border-top: .1vh solid rgba(var(--nav-border-rgb), .16); border-bottom: .1vh solid rgba(var(--nav-border-rgb), .16); 
}
@supports (height: 1svh) {
    .settings_quality { border-block: .1svh solid rgba(var(--nav-border-rgb), .16); }
}

.settings_section_heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1vh; gap: 1svh; margin-bottom: 1.5vh; margin-bottom: 1.5svh; }
.settings_section_heading > span { color: var(--muted-text); font-size: .78em; }
.settings_presets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1vh; gap: 1svh; }
.settings_preset {
    position: relative; min-width: 0; min-height: 11.4vh; min-height: 11.4svh;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 2.7vh 1.4vh 1.5vh; padding: 2.7svh 1.4svh 1.5svh;
    border: .1vh solid rgba(var(--nav-border-rgb), .23);
    
    border-radius: 1.3vh; border-radius: 1.3svh;
    font: inherit; text-align: left; background-color: rgba(var(--tool-rgb), .08); color: var(--theme-text);
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
@supports (height: 1svh) {
    .settings_preset { border: .1svh solid rgba(var(--nav-border-rgb), .23); }
}

.settings_preset strong { font-size: 1.2em; font-weight: 500; line-height: 1.4; }
.settings_preset_caption { margin-top: .7vh; margin-top: .7svh; font-size: .72em; line-height: 1.5; color: var(--muted-text); }
.settings_recommended {
    position: absolute; top: .7vh; top: .7svh; right: .8vh; right: .8svh;
    font-size: .66em; line-height: 1.5; color: var(--theme-bright);
}
.settings_recommended[hidden] { display: none; }
.settings_preset[aria-checked="true"] { background-color: var(--theme-accent); border-color: var(--theme-accent); color: var(--on-accent); }
.settings_preset[aria-checked="true"] .settings_preset_caption,
.settings_preset[aria-checked="true"] .settings_recommended { color: inherit; }
.settings_status { min-height: 1.7em; font-size: .78em; line-height: 1.7; color: var(--muted-text); }
.settings_modal button:focus-visible { outline: .16vh solid var(--theme-focus);  outline-offset: .3vh; outline-offset: .3svh; }
@supports (height: 1svh) {
    .settings_modal button:focus-visible { outline: .16svh solid var(--theme-focus); }
}

@media (hover: hover) and (pointer: fine) {
    .settings_close:hover, .settings_switch:not([aria-checked="true"]):hover { background-color: rgba(var(--tool-rgb), .42); }
    .settings_preset:not([aria-checked="true"]):hover { border-color: var(--theme-accent); background-color: rgba(var(--theme-accent-rgb), .15); }
}
@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    .settings_modal { padding: 3vh 4vw; padding: 3svh 4vw; }
    .settings_dialog { width: 54vh; width: 54svh; font-size: 1.7vh; font-size: max(1.7vh, 3.5vmin, .875rem); font-size: 1.7vh; font-size: max(1.7svh, 3.5vmin, .875rem); }
    .settings_header { padding: 2.4vh 2.4vh 2vh; padding: 2.4vh max(2.4vh, 4vw) 2vh; padding: 2.4vh 2.4vh 2vh; padding: 2.4svh max(2.4svh, 4vw) 2svh; }
    .settings_header h2 { font-size: 1.5em; }
    .settings_body { padding: .4vh 2.4vh 1.2vh; padding: .4vh max(2.4vh, 4vw) 1.2vh; padding: .4vh 2.4vh 1.2vh; padding: .4svh max(2.4svh, 4vw) 1.2svh; }
    .settings_row { gap: 3vw; }
    .settings_switch { width: 5.5vh; width: max(5.5vh, 13vmin); width: 5.5vh; width: max(5.5svh, 13vmin); height: 3.2vh; height: max(3.2vh, 7.6vmin); height: 3.2vh; height: max(3.2svh, 7.6vmin); }
    .settings_switch_thumb { top: 10%; left: 6%; width: 44%; height: 80%; }
    .settings_switch[aria-checked="true"] .settings_switch_thumb { transform: translateX(100%); }
    .settings_switch_thumb .iconfont { font-size: .95em; }
    .settings_close { width: 3.8vh; width: max(3.8vh, 8.8vmin); width: 3.8vh; width: max(3.8svh, 8.8vmin); height: 3.8vh; height: max(3.8vh, 8.8vmin); height: 3.8vh; height: max(3.8svh, 8.8vmin); }
    .settings_preset { padding-left: 1.1vh; padding-left: 1.1svh; padding-right: 1.1vh; padding-right: 1.1svh; }
}
@media (prefers-reduced-motion: reduce) {
    .settings_modal, .settings_dialog, .settings_modal button, .settings_switch_thumb { transition: none; }
}

@media (max-width: 996px) and (max-height: 540px) and (orientation: landscape), (max-width: 1200px) and (max-height: 540px) and (pointer: coarse) {
    .settings_dialog { width: 72vw; }
}