/* 背景与产品始终共用同一个等比舞台：桌面完整展示，移动端放大后整体拖动。 */
:root {
    color-scheme: dark;
    --navigation-accent: #388BD8;
    --navigation-action: var(--theme-accent, #2273D7);
    --navigation-border: #397BB488;
    --navigation-text: #F2F5F9;
    --navigation-muted: #9AA7B7;
    --navigation-dim-brightness: .32; /* 悬停时背景和其他产品的亮度：0 全黑，1 原始亮度。 */
    --navigation-hover-rim: #C8F3FFF2; /* 紧贴 PNG 轮廓的明亮浅蓝光。 */
    --navigation-hover-glow: #40B5FFE6; /* 外围蓝色光晕。 */
    --navigation-current-rim: #D5F4FFF2;
    --navigation-current-muted: #49B5FF80;
    --navigation-focus: #6DBAFF;
    --navigation-unit: 1vh;
    --navigation-safe-top: 0px; --navigation-safe-right: 0px;
    --navigation-safe-bottom: 0px; --navigation-safe-left: 0px;
}
@supports (height: 1svh) { :root { --navigation-unit: 1vh; --navigation-unit: 1svh; } }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000000; }
body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: var(--navigation-text); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, a, img { -webkit-user-drag: none; }
.product_navigation {
    position: fixed; top: 0; right: 0; bottom: auto; left: 0; overflow: hidden; background: #000000;
    /* 普通 vh 是纯 CSS 基础回退；旧内核再由 JS 写入实际可用高度，避免把大视口当小视口。 */
    height: 100vh; height: var(--navigation-height, 100vh);
}
@supports (height: 100svh) {
    .product_navigation { height: 100svh; height: var(--navigation-height, 100svh); }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    :root { --navigation-safe-top: constant(safe-area-inset-top); --navigation-safe-right: constant(safe-area-inset-right); --navigation-safe-bottom: constant(safe-area-inset-bottom); --navigation-safe-left: constant(safe-area-inset-left); }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    :root { --navigation-safe-top: env(safe-area-inset-top); --navigation-safe-right: env(safe-area-inset-right); --navigation-safe-bottom: env(safe-area-inset-bottom); --navigation-safe-left: env(safe-area-inset-left); }
}
.product_navigation[data-product-series="fire"] {
    --navigation-accent: #F16A5C; --navigation-border: #B54B4388;
    --navigation-action: var(--theme-accent, #D72638);
    --navigation-hover-rim: #FFE4DCF2; --navigation-hover-glow: #FF6755E6;
    --navigation-current-rim: #FFE7DFF2; --navigation-current-muted: #FF695980;
    --navigation-focus: #FF9A89;
}
.product_navigation.is-switching .navigation_viewport { pointer-events: none; }
.navigation_sr { position: absolute; width: .06rem; height: .06rem; margin: -.06rem; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.navigation_viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: manipulation; }
.navigation_surface { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.navigation_scene {
    position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
    transform: translate(-50%, -50%); opacity: 0;
    transition: opacity 300ms ease;
}
.product_navigation.is-ready .navigation_scene { opacity: 1; }
/* 顶部系列按钮保持可用；舞台淡出时暂时收起拖动提示，避免箭头悬在空画面上。 */
.product_navigation.is-ready.is-pannable.is-switching .navigation_drag_hint { opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 0s linear 120ms; }
.navigation_background, .navigation_products, .navigation_edges { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.navigation_background { display: block; user-select: none; pointer-events: none; filter: brightness(1); transition: filter 260ms ease; }
.navigation_products { z-index: 1; margin: 0; padding: 0; }
.navigation_product {
    position: absolute; display: block; padding: 0; margin: 0; border: 0; outline: none;
    background: transparent; cursor: inherit; user-select: none;
}
.navigation_product img { display: block; width: 100%; height: auto; pointer-events: none; }
.navigation_product[hidden] { display: none; }
/* 背景与其他产品等量变暗；只调整 RGB 亮度，保留透明度、遮挡和落点，不让产品变成半透明。 */
.navigation_product { filter: brightness(1); transition: filter 260ms ease; }
.navigation_scene.has-active-product .navigation_background,
.navigation_scene.has-active-product .navigation_product { filter: brightness(var(--navigation-dim-brightness)); }
/* 零偏移的 drop-shadow 按 PNG 透明轮廓生成蓝色边缘光晕，保持产品本身原始亮度。 */
.navigation_scene.has-active-product .navigation_product.is-active { filter: brightness(1) drop-shadow(0 0 .12rem var(--navigation-hover-rim)) drop-shadow(0 0 .65rem var(--navigation-hover-glow)); }
/* 当前产品持续高亮；悬停其他产品时仍可辨认当前位置，不改变图片尺寸与落点。 */
.navigation_product.is-current,
.navigation_scene.has-active-product .navigation_product.is-current { filter: brightness(1.18) contrast(1.2) saturate(1.12) drop-shadow(0 0 .12rem var(--navigation-current-rim)) drop-shadow(0 0 .85rem var(--navigation-hover-glow)); }
/* 另一个产品正在被查看时，当前位置仍可辨认，但明显弱于被选中的产品。 */
.navigation_scene.has-active-product .navigation_product.is-current:not(.is-active) { filter: brightness(.82) contrast(.86) saturate(.85) drop-shadow(0 0 .22rem var(--navigation-current-muted)); }
.navigation_product:focus-visible { outline: .1rem solid var(--navigation-focus); outline-offset: .3rem; border-radius: .3rem; }
.navigation_edges {
    z-index: 20; pointer-events: none;
    /* 只有出现对应方向的空余区域时，JS 才设置渐变宽度；16:9 时保留原图完整效果。 */
    background: linear-gradient(90deg, #000000 0%, #00000000 var(--navigation-fade-x, 0%), #00000000 calc(100% - var(--navigation-fade-x, 0%)), #000000 100%),
        linear-gradient(180deg, #000000 0%, #00000000 var(--navigation-fade-y, 0%), #00000000 calc(100% - var(--navigation-fade-y, 0%)), #000000 100%);
}
.navigation_return {
    position: absolute; z-index: 25; left: 3vh; top: 3vh;
    left: calc(var(--navigation-unit) * 3); top: calc(var(--navigation-unit) * 3);
    display: inline-flex; align-items: center; gap: .65em; padding: .85em 1.2em;
    border: .06rem solid #87B4E02E; border-radius: 5rem;
    background: #090D17B3; color: #BAC8D8;
    font-size: .875rem; font-size: clamp(.8rem, calc(var(--navigation-unit) * 1.5), 1.05rem); line-height: 1.2;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.navigation_toolbar {
    position: absolute; z-index: 35; left: 3vh; right: 3vh; top: 3vh;
    left: calc(var(--navigation-unit) * 3 + var(--navigation-safe-left)); right: calc(var(--navigation-unit) * 3 + var(--navigation-safe-right)); top: calc(var(--navigation-unit) * 3 + var(--navigation-safe-top));
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem;
    pointer-events: none;
}
.navigation_toolbar .navigation_return { position: static; pointer-events: auto; }
.navigation_series {
    display: flex; align-items: center; gap: .2rem; margin-left: auto; padding: .25rem;
    border: .06rem solid var(--navigation-border); border-radius: 5rem; background: #090D17E6; pointer-events: auto;
}
.navigation_series button {
    border: 0; border-radius: 5rem; margin: 0; padding: .7em 1.2em; background: transparent;
    color: #BAC8D8; font: inherit; font-size: clamp(.8rem, calc(var(--navigation-unit) * 1.5), 1.05rem);
    line-height: 1.2; white-space: nowrap; cursor: pointer; touch-action: manipulation;
    transition: background 180ms ease, color 180ms ease;
}
.navigation_series button:hover { color: #FFFFFF; }
.navigation_series button[aria-pressed="true"] { background: #D7E9F8; color: #182738; }
.navigation_series button:focus-visible { outline: .1rem solid var(--navigation-focus); outline-offset: .2rem; }
.product_navigation[data-product-series="fire"] .navigation_series button[aria-pressed="true"] { background: #F6D8D2; color: #4A211B; }
.product_navigation[data-product-series="fire"] .navigation_return:hover { background: #2B1413EB; border-color: #E36C5C88; }
.product_navigation[data-product-series="fire"] .navigation_info_eyebrow { color: var(--navigation-accent); }
.product_navigation[data-product-series="fire"] .navigation_current_marker { border-color: #FF8B7399; background: #2B100CE6; color: #FFE0D8; }
.product_navigation[data-product-series="fire"] .navigation_current_marker::before { background: #FFB59F; box-shadow: 0 0 .5em #FF6755; }
.product_navigation[data-product-series="fire"] .navigation_drag_hint { color: #FFCEC0D9; }
.product_navigation[data-product-series="fire"] .navigation_drag_hint svg { filter: drop-shadow(0 0 .4rem #CB4C3999); }
.navigation_return svg, .navigation_info_action svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.navigation_return:hover { background: #0D1B2BEB; color: #FFFFFF; border-color: #388BD888; }
.navigation_return[hidden] { display: none; }
.navigation_return:focus-visible, .navigation_info_action:focus-visible { outline: .1rem solid var(--navigation-focus); outline-offset: .25rem; }
.navigation_current_marker { position: absolute; z-index: 21; display: inline-flex; align-items: center; gap: .4em; padding: .28em .65em; border: .06rem solid #55B7FF99; border-radius: 4em; background: #06172BE6; color: #C7EDFF; font-size: .75rem; font-size: clamp(.7rem, 1.05vw, .8rem); line-height: 1.5; letter-spacing: .08em; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); }
.navigation_current_marker::before { content: ''; width: .35em; height: .35em; border-radius: 50%; background: #8ADAFF; box-shadow: 0 0 .5em #40B5FF; }
.navigation_current_marker[hidden] { display: none; }
.navigation_hint { position: absolute; z-index: 21; left: 0; right: 0; bottom: 2.4vh; bottom: calc(var(--navigation-unit) * 2.4 + var(--navigation-safe-bottom)); margin: 0; text-align: center; color: #93A6C270; font-size: .75rem; font-size: clamp(.65rem, calc(var(--navigation-unit) * 1.3), .9rem); line-height: 1.5; letter-spacing: .1em; pointer-events: none; }
.navigation_hint_touch { display: none; }
/* 原生双向滚动保留手机惯性；鼠标拖动由 JS 补充。隐藏滚动条，不影响实际滚动。 */
.product_navigation.is-pannable .navigation_viewport { overflow: auto; touch-action: pan-x pan-y; scroll-behavior: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
.product_navigation.is-pannable .navigation_viewport::-webkit-scrollbar { display: none; }
.product_navigation.is-pannable .navigation_surface { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
.product_navigation.is-pannable .navigation_scene { transform: none; }
.product_navigation.is-pannable.is-dragging .navigation_viewport { cursor: grabbing; }
.product_navigation.is-pannable .navigation_hint_desktop { display: none; }
.product_navigation.is-pannable .navigation_hint_touch { display: inline; }
.navigation_drag_hint { position: absolute; z-index: 24; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0; visibility: hidden; color: #B2DEFFD9; transition: opacity 250ms ease, visibility 0s linear 250ms; }
.product_navigation.is-ready.is-pannable .navigation_drag_hint { opacity: 1; visibility: visible; transition-delay: 0s; }
.product_navigation.is-ready.is-pannable.is-panning .navigation_drag_hint { opacity: 0; visibility: hidden; transition-delay: 0s, 250ms; }
.product_navigation.is-ready.is-pannable.has-product-details .navigation_drag_hint { opacity: 0; visibility: hidden; transition: none; }
.navigation_drag_hint svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .4rem #1D7ACB99); }
.navigation_drag_hint svg { opacity: 1; visibility: inherit; overflow: visible; transition: opacity 260ms ease, visibility 0s linear; }
.navigation_drag_hint svg.is-unavailable { opacity: 0; visibility: hidden; transition-delay: 0s, 260ms; }
.navigation_drag_hint path { animation: navigation-arrow-nudge 2.5s ease-in-out infinite; }
.navigation_drag_hint .is-left path { animation-delay: -.6s; }
.navigation_drag_hint .is-right path { animation-delay: -1.2s; }
.navigation_drag_bottom path { animation-delay: -1.8s; }
.navigation_drag_hint svg.is-unavailable path { animation-play-state: paused; }
@keyframes navigation-arrow-nudge { 0%, 100% { transform: translateY(.06rem); opacity: .55; } 50% { transform: translateY(-.18rem); opacity: 1; } }
.navigation_drag_direction { position: absolute; }
.navigation_drag_direction.is-top { top: 4%; left: 50%; transform: translateX(-50%); }
.navigation_drag_direction.is-left { left: 3%; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.navigation_drag_direction.is-right { right: 3%; top: 50%; transform: translateY(-50%) rotate(90deg); }
.navigation_drag_bottom { position: absolute; bottom: 7%; bottom: calc(7% + var(--navigation-safe-bottom)); left: 50%; display: flex; flex-direction: column; align-items: center; gap: .25em; transform: translateX(-50%); font-size: .72rem; letter-spacing: .1em; white-space: nowrap; text-shadow: 0 .1rem .6rem #000000; }
.navigation_drag_bottom svg { transform: rotate(180deg); }
/* 详情位于屏幕空间，字号独立于舞台缩放；小屏也不会随 2880 宽舞台缩小成不可读文字。 */
.navigation_info {
    position: absolute; z-index: 30; left: 0; top: 0; width: 25rem; max-width: calc(100% - 2rem);
    width: min(25rem, max(20rem, 39vh), calc(100% - 2rem));
    width: min(25rem, max(20rem, calc(var(--navigation-unit) * 39)), calc(100% - 2rem));
    border: .075rem solid var(--navigation-border); border-radius: 1.2rem;
    background: #0C0B12F5; box-shadow: 0 1rem 3rem #00000066, inset 0 0 0 .06rem #6AA8E00D;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(.6rem);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.navigation_info.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
/* 移动端始终按实际内容展开，不限高、不截断文案，也不创建内部滚动区域。 */
.product_navigation.is-pannable .navigation_info { max-height: none; overflow: visible; }
.product_navigation.is-pannable .navigation_info_body { --navigation-info-inline: 1.1rem; --navigation-info-bottom: .85rem; padding: 1rem 1.1rem .85rem; }
.product_navigation.is-pannable .navigation_info_eyebrow { margin-bottom: .5rem; font-size: .68rem; line-height: 1.35; }
.product_navigation.is-pannable .navigation_info_title { font-size: 1.25rem; line-height: 1.25; }
.product_navigation.is-pannable .navigation_info_english { margin-top: .25rem; font-size: .63rem; line-height: 1.35; letter-spacing: .1em; }
.product_navigation.is-pannable .navigation_info_description { display: block; overflow: visible; -webkit-line-clamp: unset; margin: .7rem 0 .75rem; font-size: .86rem; line-height: 1.5; }
.product_navigation.is-pannable .navigation_info_description[hidden] { display: none; }
.product_navigation.is-pannable .navigation_metrics { gap: .6rem; padding: .7rem 0 .4rem; }
.product_navigation.is-pannable .navigation_metric dt { margin-top: .3rem; font-size: .68rem; line-height: 1.4; }
.product_navigation.is-pannable .navigation_metric dd { font-size: 1.05rem; line-height: 1.3; }
.product_navigation.is-pannable .navigation_metric_unit { font-size: .6rem; }
.product_navigation.is-pannable .navigation_info_action { padding-top: .45rem; padding-bottom: .45rem; font-size: .72rem; line-height: 1.4; }
/* 由可用高度决定是否压紧间距，小屏也完整显示全部内容。 */
.product_navigation.is-pannable .navigation_info.is-compact .navigation_info_body { --navigation-info-inline: .9rem; --navigation-info-bottom: .65rem; padding: .7rem .9rem .65rem; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_info_eyebrow { margin-bottom: .35rem; font-size: .65rem; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_info_title { font-size: 1.1rem; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_info_english { margin-top: .2rem; font-size: .6rem; line-height: 1.25; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_info_description { margin: .5rem 0; font-size: .8rem; line-height: 1.4; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_metrics { gap: .4rem; padding: .5rem 0 .25rem; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_metric dt { margin-top: .2rem; font-size: .64rem; line-height: 1.3; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_metric dd { font-size: .95rem; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_metric_unit { font-size: .56rem; }
.product_navigation.is-pannable .navigation_info.is-compact .navigation_info_action { padding-top: .35rem; padding-bottom: .35rem; font-size: .65rem; }
.navigation_info_body { --navigation-info-inline: 1.65rem; --navigation-info-bottom: 1.15rem; padding: 1.5rem 1.65rem 1.15rem; }
.navigation_info_eyebrow { margin: 0 0 .75rem; color: #4479AD; font-size: .75rem; line-height: 1.4; font-weight: 600; letter-spacing: .2em; }
.navigation_info_title { margin: 0; color: #F3F5F9; font-size: 1.5rem; font-weight: 600; line-height: 1.35; }
.navigation_info_english { margin: .35rem 0 0; color: #657384; font-size: .7rem; line-height: 1.5; letter-spacing: .14em; overflow-wrap: anywhere; }
.navigation_info_description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 1.05rem 0 1.3rem; color: var(--navigation-muted); font-size: .92rem; line-height: 1.85; }
.navigation_info_description[hidden] { display: none; }
.navigation_metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 1.1rem 0 .7rem; border-top: .06rem solid #8298B32B; }
.navigation_metric { min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.navigation_metric dt { margin-top: .45rem; color: #788597; font-size: .73rem; line-height: 1.5; }
.navigation_metric dd { margin: 0; color: var(--navigation-accent); font-size: 1.15rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.navigation_metric_unit { display: block; color: #627A98; font-size: .65rem; font-weight: 400; }
/* 底栏扩展到弹窗两侧与底边；上下内边距一致，底部圆角贴合弹窗内边。 */
.navigation_info_action { display: flex; align-items: center; justify-content: space-between; margin: 0 calc(-1 * var(--navigation-info-inline)) calc(-1 * var(--navigation-info-bottom)); padding: .7rem var(--navigation-info-inline); border-radius: 0 0 1.125rem 1.125rem; background: var(--navigation-action); color: var(--on-accent, #FFFFFF); font-size: .76rem; line-height: 1.5; transition: color 180ms ease; }
.navigation_info_action:focus-visible { outline-color: var(--on-accent, #FFFFFF); outline-offset: -.2rem; }
.navigation_info_action:hover { color: var(--on-accent, #FFFFFF); }
.navigation_info_action[aria-disabled="true"] { color: var(--on-accent, #FFFFFF); cursor: default; }
.navigation_status { position: absolute; z-index: 40; top: 30%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 85%; margin: 0; padding: .85rem 1.25rem; border: .06rem solid #388BD866; border-radius: .75rem; background: #0A101DF2; color: #C9D5E6; font-size: .85rem; line-height: 1.6; text-align: center; }
.navigation_status[hidden] { display: none; }
@media (hover: none), (pointer: coarse) { .navigation_hint_desktop { display: none; } .navigation_hint_touch { display: inline; } }
@media (max-width: 996px) {
    .navigation_info { width: 22rem; max-width: calc(100% - 1.5rem); }
    .navigation_info_body { --navigation-info-inline: 1.3rem; --navigation-info-bottom: 1rem; padding: 1.2rem 1.3rem 1rem; }
    .navigation_info_title { font-size: 1.35rem; }
    .navigation_info_description { margin: .9rem 0 1rem; }
    .navigation_toolbar { left: 1rem; right: 1rem; top: 1rem; left: calc(1rem + var(--navigation-safe-left)); right: calc(1rem + var(--navigation-safe-right)); top: calc(1rem + var(--navigation-safe-top)); }
    .navigation_toolbar .navigation_return { padding: .85em .9em; }
    .navigation_series button { padding: .7em .95em; }
}
@media (max-height: 520px) {
    .navigation_info_body { --navigation-info-inline: 1.2rem; --navigation-info-bottom: .8rem; padding: 1rem 1.2rem .8rem; }
    .navigation_info_eyebrow { margin-bottom: .35rem; }
    .navigation_info_title { font-size: 1.2rem; }
    .navigation_info_description { -webkit-line-clamp: 2; margin: .55rem 0 .65rem; font-size: .82rem; }
    .navigation_metrics { padding-top: .65rem; padding-bottom: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .navigation_scene, .navigation_product, .navigation_info, .navigation_return, .navigation_info_action, .navigation_drag_hint, .navigation_drag_hint svg, .navigation_series button { transition: none; }
    .navigation_drag_hint path { animation: none; }
}