/* ==========================================================================
   Topic CSS - 主题内容样式表
   ==========================================================================
   
   目录：
   1. 基础设置 - 字体、滚动条、列表等基础样式
   2. 面包屑导航 - Breadcrumb 导航样式
   3. 主题内容 - 标题、章节、内容区域样式
   4. 右侧内容 - 目录导航、底部按钮样式
   5. 表格样式 - 表格相关样式
   6. 水印效果 - 文档水印样式
   7. 图片相关 - 图片、轮播、缩放等样式
   8. 视频播放器 - 视频容器和控件样式
   9. 代码块 - 代码高亮和复制按钮样式
   10. 标签页 - Tab 切换组件样式
   ========================================================================== */
 
 @import url("Roboto.css");
 
 /* ==========================================================================
    1. 基础设置
   ========================================================================== */
 html,
 body {
	 min-width: 100%;
	 /* height: 100%; */
	 font-size: 14px;
	 line-height: 24px;
	 font-family: 'Roboto', sans-serif;
	 color: var(--font-color-content);
 }
 
 a{
	 color: var(--font-color-link-web);
	 text-decoration: none;
 }

 a:hover,
 a:focus{
	 text-decoration: underline;
 }
 
 /* 滚动条轨道 */
 ::-webkit-scrollbar { 
	 width: 8px;   
	 height: 8px;
	 border-radius: 4px;
 } 
 
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb { 
	 border-radius: 4px; 
	 background-color: var(--background-color-scrollbar-thumb);
 }
 
 /* 列表基础样式 */
 ul {
	 padding-inline-start: 1em
 }
 
 ol {
	 padding-inline-start: 1em
 }
 
 dl dl {
	 padding-inline-start: 2em
 }
 
 li li {
	 font-size: 13px;
	 line-height: 20px;
	 margin-top: 6px;
	 margin-bottom: 6px;
 }
 
 p{
	 margin-top: 8px;
	 margin-bottom: 8px;
 }
 
 .p{
	 margin-top: 8px;
	 margin-bottom: 8px;
 }
 
 li span {
	 margin-top: 8px;
	 margin-bottom: 8px;
 }
 
 li li span {
	 margin-top: 6px !important;
	 margin-bottom: 6px !important;
 }
 
 li li p{
	 margin-top: 6px !important;
	 margin-bottom: 6px !important;
 }
 
 .ol>li, 
 .ul>li{
	 margin-top: 8px!important;
	 /* margin-bottom: 8px!important; */
 }
 
 /* 高亮文本 */
 .highlight{
	 color: var(--font-color-link);
	 background-color: #fff3a3;
	 border-radius: 2px;
 }
 
 /* 图片基础样式 */
 .image:not([usemap]), .image {
	 max-width: 100%;
 }

 /* 2026-09-12：普通图片和独立视频进入视口时平滑上移显示。
    轮播、Tab、卡片等媒体由脚本排除，避免影响已有布局和切换动画。 */
 img.image.wt_media_reveal,
 .wt_video_container.wt_media_reveal,
 video.wt_media_reveal {
	 opacity: 0;
	 transform: translate3d(0, 40px, 0);
	 transition:
		 opacity 700ms cubic-bezier(.22, 1, .36, 1),
		 transform 700ms cubic-bezier(.22, 1, .36, 1);
	 will-change: opacity, transform;
 }

 img.image.wt_media_reveal.wt_media_reveal_visible,
 .wt_video_container.wt_media_reveal.wt_media_reveal_visible,
 video.wt_media_reveal.wt_media_reveal_visible {
	 opacity: 1;
	 transform: translate3d(0, 0, 0);
	 will-change: auto;
 }

 @media (prefers-reduced-motion: reduce) {
	 img.image.wt_media_reveal,
	 .wt_video_container.wt_media_reveal,
	 video.wt_media_reveal,
	 img.image.wt_media_reveal.wt_media_reveal_visible,
	 .wt_video_container.wt_media_reveal.wt_media_reveal_visible,
	 video.wt_media_reveal.wt_media_reveal_visible {
		 opacity: 1;
		 transform: none;
		 transition: none;
		 will-change: auto;
	 }
 }
 
 /* ==========================================================================
    2. 面包屑导航 (Breadcrumb)
   ========================================================================== */
 /* 选择列表样式 */
 .choicetable {
	 border: none;
	 margin-top: 12px;
	 margin-bottom: 12px;
 }
 
 .choicetable thead {
	 display: none;
 }
 
 .choicetable td {
	 border: none;
 }
 
 /* ==========================================================================
    步骤列表 (Steps)
   ========================================================================== */
 .steps {
	 padding-left: 0px;
 }
 
 .step{
	 margin-left:30px;
 }
 
 .steps>li{
	 margin-top: 8px!important;
	 margin-bottom: 8px!important;
 }
 
 .stepexpand {
	 margin-top: 6px;
	 margin-bottom: 6px;
 }
 
 .example .p {
	 margin-left: 15px;
 }
 
 /* ==========================================================================
    3. 主题内容区域
   ========================================================================== */
 .wt_breadcrumb {
	 display: block;
	 padding: 0px 16px 6px 0px;
	 width: 100%;
 }
 
 .wt_breadcrumb_collapse{
	 display: none;
	 text-align: center;
	 line-height: 2px;
	 padding-top: 2px;
 }
 
 .wt_breadcrumb_collapse_button{
	 content: "";
	 display: inline-block;
	 background-image: url("../images/breadcrumb-collapse@2x.png");
	 background-size: 14px 14px;
	 width: 14px;
	 height: 14px;
	 position: relative;
	 top: 0px;
	 cursor: pointer;
 }
 
 .wt_breadcrumb ol {
	 display: block;
	 color: var(--font-color-content);
	 padding: 0px;
	 margin:0;
	 border-radius: 0;
	 line-height: 8px;  /* 必须小于 字号，才不影响 li 的 line-height */
	 list-style: none;
	 background:none;
	 width: calc(100% - 22px);
 }
 
 .wt_breadcrumb_ellipsis {
	 display: none;
	 position: absolute;
	 float: right;
	 top: 0px;
	 right: 80px;
	 width: 16px;
	 height: 16px;
	 background-image: url(../images/breadcrumb-more@2x.png);
	 background-size: 16px 16px;
	 cursor: pointer;
 }
 
 .wt_breadcrumb_li_overflow{
	 display:inline-block;
	 white-space: nowrap;
	 word-break: break-all;
	 overflow: hidden!important;
 }
 
 .wt_breadcrumb li{
	 display:inline-block;
	 overflow: auto;
	 font-size: 12px;
	 line-height: 18px;
 }

 /* 在脚本删除 topichead 面包屑项之前先隐藏，避免首次渲染闪现。 */
 .wt_breadcrumb ol > li > .topicref:not(.home) > a:not([data-id]) {
	 visibility: hidden;
 }

 @supports selector(li:has(a)) {
	 .wt_breadcrumb ol > li:has(> .topicref:not(.home) > a:not([data-id])) {
		 display: none;
	 }
 }
 
 .wt_breadcrumb li:not(:last-of-type):after {
	 content: "/";
	 padding: 0 5px;
	 color: var(--font-color-right-content);
 }
 
 .wt_breadcrumb ol a {
	 color: var(--font-color-content);
 }
 
 .wt_breadcrumb ol a:hover {
	 text-decoration: none;
	 color: var(--font-color-link);
 }
 
 .wt_breadcrumb ol .active {
	 color: var(--font-color-topic-content);
 }
 
 /* 文档内容 */
 .wt_topic_content{
	 color: var(--font-color-topic-content);
 }
 
 /* 文档内容 WPP 功能区 */
 .wt_topic_wpp_content{
	 display: block;
	 vertical-align: top;
	 width: 210px;
	 position: absolute;
	 top: 28px;
	 right: 80px;
 }
 
 .wt_topic_wpp_content_flex{
	 display: flex;
	 padding-top: 16px;
 }
 
	.wt_topic_wpp_item{
	display:inline-flex;
	align-items:center;
	font-size:12px;
	line-height:20px;
	cursor:pointer;
	}

 
 /* .wt_topic_wpp_item.like{
	 display: inline-block;
	 width: 60px;
	 height: 20px;
	 background: url("../images/like@2x.png") no-repeat;
	 background-size: 20px 20px;
	 padding-left: 24px;
	 margin-right: 70px; 
 } */
 
 .wt_topic_wpp_item.view{
	 display: inline-block;
	 width: 60px;
	 height: 20px;
	 background: url("../images/view@2x.png") no-repeat;
	 background-size: 20px 20px;
	 padding-left: 24px;
	 margin-right: 50px;
 }
 
 .wt_topic_wpp_item.share{
	 display: inline-block;
	 width: 60px;
	 height: 20px;
	 background: url("../images/share@2x.png") no-repeat;
	 background-size: 20px 20px;
	 padding-left: 24px;
 }
 
 .wt_topic_wpp_item.share:hover{
	 display: inline-block;
	 width: 60px;
	 height: 20px;
	 background: url("../images/share-1@2x.png") no-repeat;
	 background-size: 20px 20px;
	 padding-left: 24px;
 }
 
 /* 标题样式 */
 /* h1.title {
	 color: var(--font-color-section-title);
	 text-decoration: none;
	 font-weight: bold;
	 font-size: 30px;
	 line-height: 34px;
	 padding-top: 11px;
	 padding-bottom: 11px;
	 margin-top: 0px;
	 margin-bottom: 0px;
	 width: 65%; 
	 max-width: calc(100% - 320px);
	 overflow-wrap: anywhere;
	 word-break: break-word;
 }
 
 h2.title {
	 color: var(--font-color-section-title);
	 font-weight: bold;
	 font-size: 26px;
	 line-height: 26px;
	 padding-top: 0px;
	 padding-bottom: 2px;
	 margin-top: 30px;
	 margin-bottom: 20px;
	 cursor: pointer;
 }
 
 h3.title {
	 color: var(--font-color-section-title3);
	 font-weight: bold;
	 font-size: 20px;
	 line-height: 24px;
	 padding-top: 0px;
	 padding-bottom: 11px;
	 margin-top: 0px;
	 margin-bottom: 0px;
	 cursor: pointer;
 }
 
 h4.title {
	 color: var(--font-color-section-title3);
	 font-weight: bold;
	 font-size: 18px;
	 line-height: 22px; 
	 padding-top: 0px;
	 padding-bottom: 11px;
	 margin-top: 0px;
	 margin-bottom: 0px;
	 cursor: pointer;
 }
 
 h5.title {
	 color: var(--font-color-section-title3);
	 font-style: italic;
	 font-size: 16px;
	 line-height: 20px; 
	 padding-top: 0px;
	 padding-bottom: 11px;
	 margin-top: 0px;
	 margin-bottom: 0px;
	 cursor: pointer;
 } */
 /* 标题样式 */
 h1.title {
	 color: var(--font-color-section-title);
	 text-decoration: none;
	 font-weight: bold;
	 font-size: 30px;
	 line-height: 1.35;
	 padding-top: 11px;
	 padding-bottom: 11px;
	 margin-top: 0px;
	 margin-bottom: 0px;
	 width: 65%; /*不占据wpp功能位置*/
	 max-width: calc(100% - 320px);
	 overflow-wrap: anywhere;
	 word-break: break-word;
 }
 
 h2.title {
	 color: var(--font-color-section-title);
	 font-weight: bold;
	 font-size: 26px;
	 line-height: 1.3;
	 padding-top: 0px;
	 padding-bottom: 2px;
	 margin-top: 30px;
	 margin-bottom: 20px;
	 cursor: pointer;
 }
 
 h3.title {
	 color: var(--font-color-section-title3);
	 font-weight: bold;
	 font-size: 20px;
	 line-height: 1.3;
	 padding-top: 0px;
	 padding-bottom: 11px;
	 margin-top: 26px;
	 margin-bottom: 0px;
	 cursor: pointer;
 }
 
 h4.title {
	 color: var(--font-color-section-title3);
	 font-weight: bold;
	 font-size: 18px;
	 line-height: 1.25; 
	 padding-top: 0px;
	 padding-bottom: 11px;
	 margin-top: 22px;
	 margin-bottom: 0px;
	 cursor: pointer;
 }
 
 h5.title {
	 color: var(--font-color-section-title3);
	 font-style: italic;
	 font-size: 16px;
	 line-height: 1.2; 
	 padding-top: 0px;
	 padding-bottom: 11px;
	 margin-top: 28px;
	 margin-bottom: 0px;
	 cursor: pointer;
 }
/* 2026-09-17 更新点：参考锚点复制样式，重新设计 H2/H3 标题锚点复制按钮。 */
.wt_title_with_anchor_copy {
	 position: relative;
}

.wt_anchor_copy_button {
	 position: relative;
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 width: 28px;
	 height: 28px;
	 margin-left: 8px;
	 padding: 4px;
	 border: 0;
	 border-radius: 4px;
	 color: var(--font-color-link-web);
	 background: transparent;
	 vertical-align: -4px;
	 cursor: pointer;
	 opacity: 0;
	 pointer-events: none;
	 transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wt_title_with_anchor_copy:hover > .wt_anchor_copy_button,
.wt_title_with_anchor_copy:focus-within > .wt_anchor_copy_button,
.wt_anchor_copy_button:focus-visible,
.wt_anchor_copy_button.wt_anchor_copy_success,
.wt_anchor_copy_button.wt_anchor_copy_error {
	 opacity: 1;
	 pointer-events: auto;
}

.wt_anchor_copy_button:hover,
.wt_anchor_copy_button:focus-visible,
.wt_anchor_copy_button.wt_anchor_copy_success,
.wt_anchor_copy_button.wt_anchor_copy_error {
	 color: var(--font-color-right-content-active);
	 background-color: rgba(0, 123, 190, 0.1);
	 outline: none;
}

.wt_anchor_copy_icon {
	 width: 20px;
	 height: 20px;
	 fill: none;
	 stroke: currentColor;
	 stroke-width: 1.8;
	 stroke-linecap: round;
	 stroke-linejoin: round;
}

.wt_anchor_copy_button::after {
	 content: attr(data-tooltip);
	 position: absolute;
	 left: 50%;
	 bottom: calc(100% + 8px);
	 z-index: 20;
	 width: max-content;
	 max-width: 240px;
	 padding: 5px 8px;
	 border-radius: 4px;
	 color: #fff;
	 background-color: rgba(0, 0, 0, 0.78);
	 font-size: 12px;
	 font-style: normal;
	 font-weight: normal;
	 line-height: 18px;
	 white-space: normal;
	 transform: translateX(-50%);
	 opacity: 0;
	 visibility: hidden;
	 pointer-events: none;
	 transition: opacity 0.15s ease, visibility 0.15s ease;
}

.wt_anchor_copy_button:hover::after,
.wt_anchor_copy_button:focus-visible::after {
	 opacity: 1;
	 visibility: visible;
}

.wt_anchor_copy_button.wt_anchor_copy_success::after,
.wt_anchor_copy_button.wt_anchor_copy_error::after {
	 content: attr(data-anchor-copy-status);
	 opacity: 1;
	 visibility: visible;
}

@media only screen and (max-width: 768px) {
	 .wt_anchor_copy_button {
		 display: none !important;
	 }
}
 
 .topictitle6 {
	 margin: 1em 0 0.2em 0;
	 font-size: 1em;
	 font-weight: 300;
	 font-style: italic;
	 text-decoration: underline;
 }
 
 .section:first-child{
	 /* 未知的使用场景
	 margin-top: 0px;
	 margin-bottom: 26px; */
 }
 
 .section{
	 margin-top: 6px;
	 margin-bottom: 14px;
 }
 
 .section > *:not(.sectiontitle) {
	 margin-left: 15px;
 }
 
 /* .section > .note {
	 margin-left: 0px;
 } */

 .topic.concept.nested1 {
	 border-bottom: var(--border-section);
	 padding-bottom: 6px;
 }

 .topic.concept.nested1:last-child {
	 border-bottom: none;
 }

 .section:has(> h2.sectiontitle) {
	 border-bottom: var(--border-section);
	 padding-bottom: 6px;
 }

 .section:has(> h2.sectiontitle):last-child {
	 border-bottom: none;
 }

 /* 图片说明 */
 .fig_caption {
	 margin-top: 8px;
	 margin-bottom: 8px;
	 text-align: center;
 }
 
 /* 图片说明和表格标题 */
 .tablecap,
 .figcap {
	 color: var(--font-color-fig-table);
	 font-size: 14px;
	 line-height: 24px;
	 font-style: unset;
 }

 /* 表格标题：居中、放在表格下方（与图片标题一致） */
 .table > caption {
	 caption-side: bottom;
	 text-align: center;
	 margin-top: 8px;
	 margin-bottom: 8px;
 }
 
 /* ==========================================================================
    4. 右侧内容区域
   ========================================================================== */
 .content_box {
	 width: 100%;
	 height: auto;
	 padding: 16px 40px 0px 40px;
	 position: relative;
	 display: flex;
 }
 
 .middle_view {
	 position: relative;
	 flex: 1 1 auto;
	 padding-top: 0px;
	 padding-left: 20px;
	 padding-right: 60px;
	 padding-bottom: 0px;
	 min-height: 0px;
	 min-width: 0px;
	 font-size: 14px;
	 box-sizing: border-box;
 }
 
 .container{
	 width: 100%;
	 max-width: none;
	 padding-left: 0px;
	 padding-right: 0px;
 }
 
 .link_button {
	 cursor: pointer;
 }
 
 .link_button:hover {
	 color: var(--font-color-link);
 }
 
 /* 2026-07-28 更新点：增加右侧本页导航整栏收起、展开过渡及标题旁收起按钮样式。 */
 .right_content {
	 width: 225px;
	 flex-grow: 0;
	 flex-shrink: 0;
	 transition: width 0.2s ease;
 }

 .right_content.right_content_collapsed {
	 width: 32px;
 }

 /* 无 section / concept 导航时，隐藏空右栏，正文自动撑满 */
 .right_content:empty,
 .right_content.right_content_empty {
	 display: none;
 }

 .right_fixed_container{
	 position: fixed;
	 display: flex;
	 flex-direction: column;
	 width: 240px;
	 transition: width 0.2s ease, top 0.2s ease;
 }	

 .right_content.right_content_collapsed .right_fixed_container {
	 width: 32px;
 }
 
 .right_guide{
	 flex-shrink: 1;
	 flex-grow: 1;
	 overflow-x: hidden;
	 overflow-y: auto;
 }	
 
 .feature_guide {
	 width: 100%;
	 display: flex;
	 background: #fff;
	 flex-direction: row;
	 flex-wrap: wrap;
	 align-items: flex-start;
 }

 /* 2026-07-14：更新点：PC右侧导航折叠初始化完成前先隐藏，避免长导航首次加载时先闪现全展开状态。 */
 .wt_pc_only .feature_guide:not(.feature_guide_ready) {
	 visibility: hidden;
 }
 
 .feature_guide > div {
	 border-left: var(--border-normal);
	 padding: 8px 0px 8px 16px;
	 width: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 gap: 8px;
	 font-size: 14px;
	 line-height: 24px;
	 color: var(--font-color-right-content-active);
	 overflow: hidden;
 }

 .feature_guide_title_text {
	 min-width: 0;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 white-space: nowrap;
 }

 .feature_guide_panel_toggle {
	 width: 24px;
	 height: 24px;
	 padding: 4px;
	 border: 0;
	 border-radius: 2px;
	 flex: 0 0 24px;
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 color: var(--font-color-right-content);
	 background: transparent;
	 cursor: pointer;
	 outline: none;
 }

 .feature_guide_panel_toggle:hover {
	 color: var(--font-color-right-content-active);
	 background-color: #EDEDED;
 }

 .feature_guide_panel_toggle:focus-visible {
	 box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
 }

 .feature_guide_panel_toggle_icon {
	 width: 16px;
	 height: 16px;
	 fill: currentColor;
	 transition: transform 0.2s ease;
 }

 .feature_guide_panel_toggle.feature_guide_panel_toggle_collapsed .feature_guide_panel_toggle_icon {
	 transform: scaleX(-1);
 }

 .right_content.right_content_collapsed .feature_guide {
	 width: 32px;
 }

 .right_content.right_content_collapsed .feature_guide > div {
	 width: 32px;
	 padding: 8px 4px;
	 justify-content: center;
 }

 .right_content.right_content_collapsed .feature_guide_title_text,
 .right_content.right_content_collapsed .feature_guide > ul {
	 display: none;
 }
 
 .feature_guide > ul {
	 list-style: none;
	 max-height: calc(100vh - 240px);
	 overflow: auto;
	 font-size: 16px;
	 width: 100%;
	 padding: 0px;
 }
 
 .feature_guide ul li.active {
	 color: var(--font-color-right-content-active);
 }

 .feature_guide li {
	 border-left: 2px solid transparent;
	 box-sizing: border-box;
	 position: relative;
	 padding: 8px 0px 8px 16px;
	 list-style-type: none;
	 font-size: 13px;
	 line-height: 22px;
	 color: var(--font-color-right-content);
	 cursor: pointer;
 }

 .feature_guide li.active::before {
	 content: "";
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 left: -2px;
	 width: 2px;
	 background-color: var(--background-color-primary-button, #D71820);
	 background-color: color-mix(in srgb, var(--background-color-primary-button, #D71820) 82%, transparent);
	 pointer-events: none;
 }
 
 .feature_guide.feature_guide_collapsible li.feature_guide_group_header {
	 position: relative;
	 padding-right: 24px;
 }

 .feature_guide.feature_guide_collapsible li.feature_guide_has_children::after {
	 content: "";
	 position: absolute;
	 top: 50%;
	 right: 8px;
	 width: 6px;
	 height: 6px;
	 border-right: 1px solid var(--font-color-right-content);
	 border-bottom: 1px solid var(--font-color-right-content);
	 transform: translateY(-60%) rotate(45deg);
	 transition: transform 0.2s ease;
 }

 .feature_guide.feature_guide_collapsible li.feature_guide_has_children.feature_guide_expanded::after {
	 transform: translateY(-35%) rotate(-135deg);
 }

 .feature_guide.feature_guide_collapsible li.feature_guide_has_children.active::after {
	 border-color: var(--font-color-right-content-active);
 }

 .feature_guide.feature_guide_collapsible li.feature_guide_group_child.feature_guide_collapsed {
	 display: none;
 }

 .feature_guide_h2{
 }
 
 .feature_guide_h3{
	 padding-left: 32px !important;
 }
 
 .feature_guide_h4{	
	 padding-left: 48px !important;
 }

 .feature_guide_h5{
	 padding-left: 64px !important;
 }
 
 /* ==========================================================================
    5. 表格样式
   ========================================================================== */
 .div_table {
	 position: relative;
	 max-width: 100%;
	 overflow-x: auto;
	 overflow-y: hidden;
 }
 
 /* 行悬停高亮（排除 Entry 行） */
 .div_table .table tbody tr:not(.entry):hover {
	 background-color: rgb(239,251,255);
 }
 
 /* 列悬停高亮（排除 Entry 行） */
 .div_table .table td:not(.entry):hover,
 .div_table .table th:not(.entry):hover {
	 background-color: rgb(239,251,255);
 }
 
 .table {
	 --bs-table-color: inherit;
	 --bs-table-bg: transparent;
	 --bs-table-border-color: inherit;
	 --bs-table-accent-bg: transparent;
	 --bs-table-striped-color: inherit;
	 --bs-table-striped-bg: transparent;
	 --bs-table-active-color: inherit;
	 --bs-table-active-bg: transparent;
	 --bs-table-hover-color: inherit;
	 --bs-table-hover-bg: transparent;
	 border: var(--border-table);
	 font-size: 13px;
	 line-height: 20px;
	 margin-top: 12px;
	 margin-bottom: 12px;
	 vertical-align: baseline;
 }

 .table > :not(caption) > * > * {
	 background-color: transparent;
	 border: var(--border-table);
	 box-shadow: none;
 }

 /* Changelog uses a card-like row layout rather than a cell grid. */
 .table.wt_changelog_table > :not(caption) > * > * {
	 border: 0;
 }

 .div_table .table td,
 .div_table .table th {
	 overflow-wrap: anywhere;
	 word-break: break-word;
	 vertical-align: top;
 }

	/* Keep topic tables top-aligned after Bootstrap 5 table resets. */
	.div_table .table > :not(caption) > * > *,
	.div_table .table td,
	.div_table .table th {
		vertical-align: top;
	}

	.div_table .table td img.image,
	.div_table .table th img.image {
		vertical-align: top;
	}

 /* 说明列表中的中英文混排文本允许在窄屏或缩窄正文列中断行，避免撑出页面。 */
 .note {
	 max-width: 100%;
	 box-sizing: border-box;
 }

 .note .p,

 .note .ul,
 .note .ol,
 .note .li {
	 min-width: 0;
	 max-width: 100%;
	 box-sizing: border-box;
	 overflow-wrap: anywhere;
	 word-break: break-word;
 }
 
 .tablenoborder .table {
	 margin-top: 12px;
	 margin-bottom: 12px;
 }
 
 /* 边框专用：内嵌套 .table */
 .tableborder {
	 margin-top: 12px;
	 margin-bottom: 12px;
 }
 
 /* 无边框表：.tableborder 内嵌套 .table */
 .tableborder .table{
	 margin-top: 0px;
	 margin-bottom: 0px;
 }
 
 .tablenoborder .table, .tablenoborder td, .tablenoborder tr {
	 border: none !important;
 }
 
 .thead {
	 background-color: var(--background-color-thead);
 }
 
 td, th {
	 padding: 0.5em;
 }
 
 .table>thead>tr>th {
	 font-size: 13px;
	 line-height: 20px;
	 font-weight: bold;
	 color: var(--font-color-fig-table);
	 padding: 2px 10px;
	 border-top: var(--border-table);
	 border-bottom: var(--border-table);
 }

 /* 2026-08-13 更新点：新增 outputclass="changelog"，将三列表格转换为两列 timeline 更新记录。 */
 /* 2026-09-11 更新点：修复 Changelog 首次加载时原始三列表格短暂闪现的问题。 */
 .table.changelog:not(.wt_changelog_ready) {
	 visibility: hidden;
 }

 .div_table.wt_changelog_container {
	 overflow: visible;
 }

 .div_table.wt_changelog_container .table_zoom,
 .wt_table_rowfixed.wt_changelog_table {
	 display: none !important;
 }

 .table.wt_changelog_table,
 .table.wt_changelog_table > tbody,
 .table.wt_changelog_table > tbody > tr,
 .table.wt_changelog_table > tbody > tr > td {
	 display: block;
	 width: 100%;
 }

 .table.wt_changelog_table {
	 margin: 0;
	 border: 0;
	 border-collapse: collapse;
	 border-spacing: 0;
	 background: transparent;
 }

 /* 2026-08-13 更新点：changelog 隐藏表格名称和源表头，将源表格前两列作为每条 update 的左侧信息。 */
 .table.wt_changelog_table > caption,
 .table.wt_changelog_table > thead {
	 display: none;
 }

 .table.wt_changelog_table > tbody {
	 display: flex;
	 flex-direction: column;
	 gap: 36px;
 }

 .table.wt_changelog_table > tbody > tr {
	 display: grid;
	 grid-template-columns: 168px minmax(0, 1fr);
	 column-gap: 40px;
	 align-items: start;
	 position: relative;
	 background: transparent;
 }

 /* 2026-08-13 更新点：在 changelog 左侧信息列与内容列之间增加 timeline 连接线和节点。 */
 .table.wt_changelog_table > tbody > tr::before {
	 content: "";
	 position: absolute;
	 top: 7px;
	 bottom: -36px;
	 left: 187px;
	 width: 1px;
	 background: linear-gradient(to bottom, #C9CDD2 0%, #D9DCE0 68%, rgba(217, 220, 224, 0) 100%);
 }

 .table.wt_changelog_table > tbody > tr::after {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 181px;
	 width: 13px;
	 height: 13px;
	 border: 3px solid #A8ADB3;
	 border-radius: 50%;
	 background-color: var(--background-color-normal);
	 box-sizing: border-box;
 }

 /* 2026-08-13 更新点：最后一个 timeline 节点的渐隐线止于当前记录底部，避免越过章节分隔线。 */
 .table.wt_changelog_table > tbody > tr:last-child::before {
	 bottom: 0;
 }

 .table.wt_changelog_table > tbody > tr > td {
	 padding: 0;
	 border: 0 !important;
	 vertical-align: top;
 }

 .table.wt_changelog_table .wt_changelog_meta {
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 gap: 8px;
	 padding: 0;
	 color: var(--font-color-topic-content);
	 background: transparent;
 }

 /* 2026-08-18 更新点：Changelog 第 1 列使用 #D9E8FF 浅蓝背景和适配的深蓝文字，并将色块上沿与右侧首行对齐。 */
 /* 2026-09-28 更新点：徽章颜色支持 outputclass 色值类动态自定义（JS 写入 --wt-changelog-badge-* 变量），
    未设置时保持默认浅蓝底 #D9E8FF + 深蓝字 #24527A。 */
 .table.wt_changelog_table .wt_changelog_meta_primary {
	 margin-top: 0;
	 padding: 5px 10px;
	 border-radius: 8px;
	 color: var(--wt-changelog-badge-color, #24527A);
	 background-color: var(--wt-changelog-badge-bg, #D9E8FF);
	 font-size: 13px;
	 font-weight: 600;
	 line-height: 20px;
 }

 .table.wt_changelog_table .wt_changelog_meta_secondary {
	 margin: 0;
	 padding-left: 0;
	 color: #73726C;
	 background: transparent;
	 font-size: 13px;
	 line-height: 22px;
 }

 .table.wt_changelog_table .wt_changelog_content {
	 display: flex;
	 flex-direction: column;
	 align-self: start;
	 min-width: 0;
	 margin-top: 0;
	 padding-left: 0;
	 padding-top: 0;
	 color: var(--font-color-topic-content);
	 background: transparent;
}

/* Changelog 左侧色块与右侧内容从同一行顶部开始，避免首行视觉下沉。 */
 .table.wt_changelog_table .wt_changelog_meta {
	 align-self: start;
 }

 /* 2026-08-13 更新点：第三列由 ph 标记对生成的 span.ph 复用“完整更新说明”链接，显示为按钮并固定在内容末尾。 */
 .table.wt_changelog_table .wt_changelog_content > span.ph {
	 order: 99;
	 align-self: flex-start;
	 margin: 8px 0 0;
	 padding: 0;
 }

 .table.wt_changelog_table .wt_changelog_content > span.ph > a {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 min-height: 32px;
	 padding: 5px 14px;
	 border: 1px solid #D7DBDF;
	 border-radius: 6px;
	 color: var(--font-color-section-title);
	 background-color: var(--background-color-normal);
	 font-size: 13px;
	 font-weight: 500;
	 line-height: 20px;
	 text-decoration: none;
	 transition: border-color 0.2s ease, background-color 0.2s ease;
 }

 .table.wt_changelog_table .wt_changelog_content > span.ph > a:hover {
	 border-color: #B8BEC5;
	 background-color: #F7F8F8;
	 text-decoration: none;
 }

 .table.wt_changelog_table .wt_changelog_meta_primary > :first-child,
 .table.wt_changelog_table .wt_changelog_meta_secondary > :first-child,
 .table.wt_changelog_table .wt_changelog_content > :first-child {
	 margin-top: 0;
}

 .table.wt_changelog_table .wt_changelog_meta_primary > *,
 .table.wt_changelog_table .wt_changelog_content > :not(.p):not(.ul):not(.ol):not(span.ph) {
	 margin-top: 0 !important;
 }

 /* 段落按普通块内容对齐；列表单独清除其默认上外边距，
    保留列表自身的缩进和项目间距。 */
 .table.wt_changelog_table .wt_changelog_content > .p {
	 margin-top: 0 !important;
 }

 .table.wt_changelog_table .wt_changelog_content > :is(.ul, .ol) {
	 margin-top: 0 !important;
	 margin-block-start: 0 !important;
	 padding-top: 0;
	 padding-block-start: 0;
 }

 .table.wt_changelog_table .wt_changelog_content > :is(.ul, .ol) > .li:first-child {
	 margin-top: 0 !important;
	 margin-block-start: 0 !important;
 }

 .table.wt_changelog_table .wt_changelog_content > :is(.ul, .ol) > .li:first-child > :first-child {
	 margin-top: 0 !important;
	 margin-block-start: 0 !important;
 }

 .table.wt_changelog_table .wt_changelog_meta_primary > :last-child,
 .table.wt_changelog_table .wt_changelog_meta_secondary > :last-child,
 .table.wt_changelog_table .wt_changelog_content > :last-child {
	 margin-bottom: 0;
 }

 .div_table .table.wt_changelog_table tbody tr:hover,
 .div_table .table.wt_changelog_table tbody tr:hover > .wt_changelog_content {
	 background-color: transparent;
 }

 .div_table .table.wt_changelog_table tbody tr:hover > .wt_changelog_meta {
	 background-color: transparent;
 }

 .div_table .table.wt_changelog_table tbody tr:hover .wt_changelog_meta_primary {
	 background-color: var(--wt-changelog-badge-bg, #D9E8FF);
 }

 /* 2026-07-29 更新点：为FilteredTable提供桌面端Excel式筛选排序入口、下拉面板和状态反馈。 */
 @media (min-width: 769px) {
	 .FilteredTable.wt_filtered_table_ready > thead > tr > .wt_filtered_table_header,
	 .wt_table_rowfixed > thead > tr > .wt_filtered_table_header {
		 position: relative;
		 padding-right: 36px;
	 }

	 /* 2026-07-29 更新点：最后一列表头为既有放大按钮额外留位，避免与筛选入口重叠。 */
	 .FilteredTable.wt_filtered_table_ready > thead > tr > .wt_filtered_table_header:last-child,
	 .wt_table_rowfixed > thead > tr > .wt_filtered_table_header:last-child {
		 padding-right: 64px;
	 }

	 .wt_filtered_table_trigger {
		 position: absolute;
		 top: 50%;
		 right: 7px;
		 width: 20px;
		 height: 20px;
		 padding: 0;
		 border: 1px solid transparent;
		 border-radius: 3px;
		 background: transparent;
		 color: #667085;
		 cursor: pointer;
		 transform: translateY(-50%);
	 }

	 .wt_filtered_table_trigger::before {
		 position: absolute;
		 top: 7px;
		 left: 6px;
		 width: 0;
		 height: 0;
		 border-top: 6px solid currentColor;
		 border-right: 4px solid transparent;
		 border-left: 4px solid transparent;
		 content: "";
	 }

	 .wt_filtered_table_trigger:hover,
	 .wt_filtered_table_trigger:focus-visible,
	 .wt_filtered_table_trigger[aria-expanded="true"] {
		 /* 2026-09-28 更新点：筛选触发器激活色支持 FilteredTable 色值类动态自定义，默认 #245fc7。 */
		 border-color: var(--wt-filtered-accent, #b8c7dc);
		 background-color: #eaf2ff;
		 color: var(--wt-filtered-accent, #245fc7);
		 outline: none;
	 }

	 .wt_filtered_table_trigger_filtered,
	 .wt_filtered_table_trigger_sort_asc,
	 .wt_filtered_table_trigger_sort_desc {
		 color: var(--wt-filtered-accent, #1677ff);
	 }

	 .wt_filtered_table_trigger_filtered::after {
		 position: absolute;
		 right: 2px;
		 bottom: 2px;
		 width: 5px;
		 height: 5px;
		 border: 1px solid #fff;
		 border-radius: 50%;
		 background-color: var(--wt-filtered-accent, #1677ff);
		 content: "";
	 }

	 .wt_filtered_table_trigger_sort_asc::before {
		 top: 5px;
		 border-top: 0;
		 border-right-width: 4px;
		 border-bottom: 6px solid currentColor;
		 border-left-width: 4px;
	 }

	 .wt_filtered_table_menu {
		 position: fixed;
		 z-index: 10020;
		 box-sizing: border-box;
		 width: 260px;
		 max-width: calc(100vw - 16px);
		 padding: 8px;
		 border: 1px solid #d7dce5;
		 border-radius: 6px;
		 background-color: #fff;
		 box-shadow: 0 8px 24px rgba(31, 45, 61, 0.18);
		 color: #303133;
		 font-size: 13px;
		 line-height: 20px;
	 }

	 .wt_filtered_table_menu_title {
		 overflow: hidden;
		 padding: 4px 8px 7px;
		 border-bottom: 1px solid #ebeef5;
		 font-weight: 600;
		 text-overflow: ellipsis;
		 white-space: nowrap;
	 }

	 .wt_filtered_table_menu_action {
		 display: block;
		 width: 100%;
		 padding: 6px 8px;
		 border: 0;
		 border-radius: 3px;
		 background: transparent;
		 color: inherit;
		 text-align: left;
		 cursor: pointer;
	 }

	 .wt_filtered_table_menu_action:hover:not(:disabled),
	 .wt_filtered_table_menu_action:focus-visible {
		 background-color: #edf5ff;
		 color: var(--wt-filtered-accent, #1677ff);
		 outline: none;
	 }

	 .wt_filtered_table_menu_action:disabled {
		 color: #a8abb2;
		 cursor: not-allowed;
	 }

	 .wt_filtered_table_clear {
		 margin-bottom: 5px;
		 border-bottom: 1px solid #ebeef5;
		 border-radius: 0;
	 }

	 .wt_filtered_table_select_all_label,
	 .wt_filtered_table_value_label {
		 display: flex;
		 gap: 8px;
		 align-items: flex-start;
		 padding: 5px 8px;
		 border-radius: 3px;
		 font-weight: normal;
		 cursor: pointer;
	 }

	 .wt_filtered_table_select_all_label:hover,
	 .wt_filtered_table_value_label:hover {
		 background-color: #f5f7fa;
	 }

	 .wt_filtered_table_select_all_label input,
	 .wt_filtered_table_value_label input {
		 flex: 0 0 auto;
		 margin: 3px 0 0;
	 }

	 .wt_filtered_table_select_all_label span,
	 .wt_filtered_table_value_label span {
		 overflow-wrap: anywhere;
	 }

	 .wt_filtered_table_select_all_label {
		 margin-bottom: 3px;
		 font-weight: 600;
	 }

	 .wt_filtered_table_value_list {
		 max-height: 220px;
		 overflow-y: auto;
		 border-top: 1px solid #ebeef5;
		 border-bottom: 1px solid #ebeef5;
	 }

	 .wt_filtered_table_menu_footer {
		 display: flex;
		 gap: 8px;
		 justify-content: flex-end;
		 padding: 8px 0 0;
	 }

	 .wt_filtered_table_menu_footer button {
		 min-width: 58px;
		 padding: 4px 12px;
		 border: 1px solid #c8ccd4;
		 border-radius: 3px;
		 background-color: #fff;
		 cursor: pointer;
	 }

	 .wt_filtered_table_menu_footer button:hover,
	 .wt_filtered_table_menu_footer button:focus-visible {
		 border-color: var(--wt-filtered-accent, #1677ff);
		 color: var(--wt-filtered-accent, #1677ff);
		 outline: none;
	 }

	 .wt_filtered_table_menu_footer .wt_filtered_table_apply {
		 border-color: var(--wt-filtered-accent, #1677ff);
		 background-color: var(--wt-filtered-accent, #1677ff);
		 color: #fff;
	 }

	 .wt_filtered_table_menu_footer .wt_filtered_table_apply:hover,
	 .wt_filtered_table_menu_footer .wt_filtered_table_apply:focus-visible {
		 border-color: #4096ff;
		 background-color: #4096ff;
		 color: #fff;
	 }

	 .wt_filtered_table_empty > td {
		 padding: 18px 12px !important;
		 color: #909399 !important;
		 text-align: center;
	 }
 }
 
 /* 表格单元格通用样式 */
 .table>thead>tr>th, .table>thead>tr>td, 
 .table>tfoot>tr>th, .table>tfoot>tr>td, 
 .table>tbody>tr>th, .table>tbody>tr>td, 
 .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, 
 .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, 
 .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
	 vertical-align: top;
	 border-color: inherit;
	 color: var(--font-color-fig-table);
	 padding: 2px 10px;
	 border-top: var(--border-table);
 }
 
 /* ==========================================================================
    6. 水印效果 (Watermark)
   ========================================================================== */
 .cover {
	 position:absolute;
	 left:0;
	 top:0;
	 z-index:999999999999999;
	 margin-right:60px;
	 margin-left:60px;
	 margin-top:90px;
	 margin-bottom:90px;
	 color: #965454;
	 display:block;
	 padding:2px 1px;
	 /* font-family:'宋体'; */
	 /* font-weight:bold; */
	 font-size:32px;
	 white-space:nowrap;
	 /* text-shadow: 1px 0 0 #eee; */
	 transform:rotate(45deg);
	 -ms-transform:rotate(45deg);
	 -moz-transform:rotate(45deg);
	 -webkit-transform:rotate(45deg);
	 -o-transform:rotate(45deg);
	 -moz-opacity:0.3; opacity:0.3;/*透明*/
	 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
 }
 
 .cover-Blink-area { 
	 position:absolute;
	 text-align: center;
	 left:0;
	 top:0;
	 width:100%;
	 height:100%;
	 display:block;
	 z-index:999999999999999;
	 pointer-events: none;
	 overflow: hidden;
 }
 
 .cover-Blink {
	 display:inline-block;
	 margin-right:60px;
	 margin-left:60px;
	 margin-top:90px;
	 margin-bottom:90px;
	 padding:2px 1px;
	 /* font-family:'宋体'; */
	 /* font-weight:bold; */
	 font-size:28px;
	 color:rgba(224, 205, 207, 0.15);/*透明*/
	 white-space:nowrap;
	 /* text-shadow: 1px 0 0 #eee; */
	 transform:rotate(45deg);
	 -ms-transform:rotate(45deg);
	 -moz-transform:rotate(45deg);
	 -webkit-transform:rotate(45deg);
	 -o-transform:rotate(45deg);
 }
 
 /* ==========================================================================
    7. 图片相关样式
   ========================================================================== */
 /* 表格缩放按钮 */
 /* 2026-07-29 更新点：提高表格放大按钮层级并固定背景绘制方式，避免Tab表头覆盖或裁切图标。 */
 .table_zoom{
	 position: absolute;
	 float: left;
	 z-index: 10;
	 content: "";
	 width: 24px;
	 height: 24px;
	 background-image: url(../images/zoom-in@2x.png);
	 background-position: center;
	 background-repeat: no-repeat;
	 background-size: 24px 24px;
	 cursor: pointer;
 }
 
 .wt_table_rowfixed {
	 position: fixed;
	 top: 0px;
	 margin-top: 0px !important;
	 z-index: 1;
	 font-size: 14px;
	 table-layout: fixed;
	 border-color: #DFE1E6;
 }
 
 /* 非轮播图片 */
 .fig .image {
	 display: block;
	 margin: auto;
 }
 
 .fig:not(.carousel) {
	 position: relative;
	 width: auto;
	 margin-top: 6px;
	 margin-bottom: 16px;
 }
 
 /* 图片缩放图标 */
 .img_zoom {
	 position: absolute;
	 float: left;
	 z-index: 10;
	 width: 24px;
	 height: 24px;
	 background-image: url(../images/zoom-in@2x.png);
	 background-size: 24px 24px;
	 cursor: pointer;
 } 
 
 /* 图片热点地图 */
 img.image:not(.icon) {
	 cursor: zoom-in;
 }
 
 .image_usemap{
 }
 
 area{
	 cursor: default;
 }
 
 .img_usemap_tip{
	 display: none;
	 position: fixed;
	 z-index: 1000;
	 border: 1px solid #7b8b6f;
	 border-radius: 5px;
	 padding: 3px 6px;
	 background-color: #FFF;
	 max-width: 300px;
 }
 
 .img_usemap_tip_title{
	 font-size: 14px;
	 font-weight: bold;
	 line-height: 24px;
 }
 
 .img_usemap_tip_text{
	 font-size: 12px;
	 line-height: 20px;
 }
 
 .img_spot{
	 position: absolute;
	 float: left;
	 z-index: 10;
	 width: 20px;
	 height: 20px;
	 background-image:url("../images/spot-grey.gif");
	 background-size: 20px 20px;
	 cursor: pointer;
 }
 
/* ==========================================================================
   8. 轮播图样式 (Carousel)
  ========================================================================== */
 .wt_fig_carousel_layout{
	 display: flex;
	 flex-direction: column;
	 align-items: stretch;
	 gap: 6px;
	 width: 100%;
	 margin-top: 6px;
	 margin-bottom: 16px;
 }

 .fig.carousel.slide{
	 position: relative;
	 overflow: hidden;
	 flex: 1 1 0;
	 width: 100%;
	 min-width: 0;
	 min-height: 0;
	 margin: 0;
	 background: rgb(239,243,246);
	 /* 2026-09-01 更新点：HTML 里的原生轮播容器在 JS 未把它包进 .wt_fig_carousel_layout 之前先隐藏，
	    避免视频轮播和文本块出现「100% 铺满 → 80%」的首屏宽度跳变。 */
	 visibility: hidden;
 }
 /* 2026-09-01 更新点：只有 JS 归一化完成（挂上 wt_carousel_layout_ready 或包入 layout）才显示，
    纯视频轮播另需等元数据到达（wt_carousel_video_ready），pending 期间仍保持隐藏。 */
 .wt_fig_carousel_layout > .fig.carousel.slide,
 .fig.carousel.slide.wt_carousel_layout_ready{
	 visibility: visible;
 }
 .fig.carousel.slide.wt_carousel_video_pending{
	 visibility: hidden;
 }

 /* 2026-09-01 更新点：HTML 里原生的轮播文本块首帧隐藏，等 JS 归一化把它包入 layout 后再显示，
    避免文本从 100% 宽跳到 80% 宽。 */
 .wt_fig_carousel_text_content{
	 visibility: hidden;
 }
 .wt_fig_carousel_layout > .wt_fig_carousel_text_content{
	 visibility: visible;
 }

 .fig.fignone.carousel.slide.wt_carousel_video_only{
	 align-self: center;
	 /* 视频轮播按自身比例决定高度，不能参与父级剩余高度分配，否则高度会塌陷为 0。 */
	 flex: 0 0 auto;
	 width: 80%;
	 max-width: 1200px;
	 /* 2026-09-01 更新点：在被包进 flex layout 前也保持水平居中，避免 100% → 80% 的首屏跳变。 */
	 margin-left: auto;
	 margin-right: auto;
	 /* 无法读取视频元数据前的兜底比例，JS 会在可用时替换为原始比例。 */
	 aspect-ratio: 16 / 9;
 }

 /* 2026-09-01 更新点：脚本包裹进 flex layout 前，纯视频轮播仍居中显示 80% 宽度，
    避免非 flex 上下文里 align-self:center 失效导致先以 100% 宽度绘制再跳到 80%。 */
 .fig.fignone.carousel.slide:has(video):not(:has(img.image)){
	 align-self: center;
	 flex: 0 0 auto;
	 width: 80%;
	 max-width: 1200px;
	 margin-left: auto;
	 margin-right: auto;
	 aspect-ratio: 16 / 9;
	 visibility: hidden;
 }

 .fig.fignone.carousel.slide:has(video):not(:has(img.image)).wt_carousel_video_ready{
	 visibility: visible;
 }

 .wt_fig_carousel_text_content:has(+ .fig.fignone.carousel.slide:has(video):not(:has(img.image))),
 .fig.fignone.carousel.slide:has(video):not(:has(img.image)) + .wt_fig_carousel_text_content{
	 width: 80%;
	 max-width: 1200px;
	 margin-left: auto;
	 margin-right: auto;
 }

 .fig.fignone.carousel.slide.wt_carousel_video_pending{
	 visibility: hidden;
 }

 .wt_fig_carousel_layout.wt_carousel_video_layout > .wt_fig_carousel_text_content{
	 align-self: center;
	 /* 2026-09-01 更新点：视频宽度稳定前给文本块预置 80%/1200px 兜底宽度，
	    避免文字块先以 100% 宽绘制、待 JS 同步宽度后再收窄的跳变。 */
	 width: 80%;
	 max-width: 1200px;
 }

 /* 2026-09-12：含图片的轮播与独立视频使用接近的正文占比，避免图片轮播横向铺满正文。 */
 .wt_fig_carousel_layout > .fig.fignone.carousel.slide.wt_carousel_image_gallery{
	 align-self: center;
	 width: 80%;
	 max-width: 1200px;
	 margin-left: auto;
	 margin-right: auto;
 }

 .wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.wt_carousel_image_gallery)
 > .wt_fig_carousel_text_content{
	 align-self: center;
	 width: 80%;
	 max-width: 1200px;
	 margin-left: auto;
	 margin-right: auto;
 }

 .fig.fignone.carousel.slide .carousel-inner{
	 height: 100%;
 }

 .fig.fignone.carousel.slide.has-multiple-items .carousel-inner{
	 height: calc(100% - 20px);
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item{
	 height: 100%;
	 overflow: auto;
	 text-align: center;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.active{
	 display: block;
 }

 /* 2026-07-22：更新点：PC端图片轮播项使用固定媒体高度完整展示并居中，不产生图片内部滚动。 */
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_image_item.active{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 overflow: hidden;
 }

 /* 2026-07-13：更新点：视频轮播项使用弹性布局，兼容PC自定义播放器的垂直居中。 */
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item.active{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 overflow: hidden;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item-next,
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item-prev{
	 display: block;
	 position: absolute;
	 top: 0;
	 width: 100%;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-next,
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-prev{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 overflow: hidden;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item.carousel-item-next,
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item.carousel-item-prev{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 overflow: hidden;
 }

 /* 2026-09-12：图片轮播使用更柔和的 Apple 风格叠层淡入淡出。
    仅作用于含图片的轮播，混合图片/视频轮播中的视频仍使用 Bootstrap 原生位移切换。 */
 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item{
	 opacity: 0;
	 transform: scale(1.018);
	 filter: blur(7px);
	 transition:
		 opacity 680ms cubic-bezier(.16, 1, .3, 1),
		 transform 680ms cubic-bezier(.16, 1, .3, 1),
		 filter 680ms cubic-bezier(.16, 1, .3, 1);
	 will-change: opacity, transform, filter;
 }

 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.active{
	 opacity: 1;
	 transform: scale(1);
	 filter: blur(0);
	 position: relative;
	 z-index: 2;
 }

 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-next,
 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-prev{
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 1;
 }

 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.active.carousel-item-start,
 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.active.carousel-item-end{
	 opacity: 0;
	 transform: scale(1.004);
	 filter: blur(2px);
	 z-index: 1;
 }

 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-next.carousel-item-start,
 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-prev.carousel-item-end{
	 opacity: 1;
	 transform: scale(1);
	 filter: blur(0);
	 z-index: 2;
 }

 /* 普通图片轮播保持固定画布并瞬时切换，避免图片先铺满再回到原始比例。 */
 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image){
	 background: var(--background-color-footer);
 }

 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image)
 .carousel-inner > .carousel-item.wt_carousel_image_item{
	 transform: none !important;
	 filter: none !important;
	 transition: none !important;
	 will-change: auto;
 }

 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image)
 .carousel-inner > .carousel-item > img.image{
	 transition: none;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item > img.image{
	 width: 100% !important;
	 height: 100% !important;
	 max-width: 100%;
	 max-height: 100%;
	 object-fit: contain;
	 flex: 1 1 auto;
	 margin: 0 auto;
 }

 /* 2026-09-13：普通图片轮播的实际图片位于
    .carousel-item.wt_carousel_image_item 内。图片区域沿用文字容器背景并保留内边距，
    避免图片贴边或被通用轮播规则拉伸到整个容器。gallery 使用独立布局。 */
 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image) .carousel-inner{
	 padding: 16px;
	 background: var(--background-color-footer);
	 border-radius: 10px;
	 box-sizing: border-box;
 }

 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image) .carousel-indicators{
	 background-color: var(--background-color-footer);
 }

 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image)
 .carousel-inner > .carousel-item.wt_carousel_image_item{
	 background: var(--background-color-footer);
	 border-radius: 6px;
	 box-sizing: border-box;
 }

 .fig.fignone.carousel.slide:not(.gallery):has(> .carousel-inner > .carousel-item > img.image)
 .carousel-inner > .carousel-item > img.image{
	 width: 100% !important;
	 height: 100% !important;
	 max-width: 100%;
	 max-height: 100%;
	 object-fit: contain;
	 flex: 1 1 auto;
	 display: block !important;
	 margin: 0;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item > div,
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item > div > video{
	 max-width: 100%;
	 max-height: 100%;
 }

 /* 2026-08-21：更新点：视频与图片一致，在固定媒体区域内完整展示并且不产生内部滚动。 */
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item > div{
	 width: 100%;
	 height: 100%;
	 min-height: 0;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 flex: 1 1 auto;
	 margin: 0;
	 overflow: hidden !important;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item .wt_video_container.wt_in_carousel{
	 width: 100%;
	 height: 100%;
	 max-width: 100%;
	 max-height: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 margin: 0;
	 overflow: hidden;
	 box-sizing: border-box;
 }

 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item > div > video,
 .fig.fignone.carousel.slide .carousel-inner > .carousel-item.wt_carousel_video_item .wt_video_container.wt_in_carousel > video{
	 display: block;
	 width: 100%;
	 height: 100%;
	 max-width: 100%;
	 max-height: 100%;
	 object-fit: contain;
	 flex: 1 1 auto;
	 margin: 0;
	 border-radius: 0;
	 box-shadow: none;
 }

 @media (prefers-reduced-motion: reduce) {
	 .fig.fignone.carousel.slide.wt_carousel_image_gallery .carousel-inner > .carousel-item.wt_carousel_image_item{
		 transition: none;
		 transform: none;
		 filter: none;
		 will-change: auto;
	 }
 }
 
 div>video{
	 max-width: 100%;
 }
 
 /* 文字模块 */
 .wt_fig_carousel_text_content{
	 position: relative;
	 flex: 0 1 auto;
	 width: 100%;
	 overflow: hidden;
	 list-style: none;
	 padding: 0;
	 z-index: 1;
	 margin: 0;
	 min-width: 0;
	 min-height: 0;
 }

 /* 2026-07-22：更新点：PC端恢复fig outputclass=top语义，使文字说明显示在媒体上方。 */
 .wt_fig_carousel_layout.wt_fig_carousel_text_top .wt_fig_carousel_text_content{
	 order: -1;
 }
 
 .wt_fig_carousel_text_indicators{
	 display: block;
	 overflow-y: auto;
	 position: relative;
	 left: 0;
	 z-index: 1;
	 padding-top: 2px;
	 margin: 0;
	 width: 100%;
	 height: auto;
	 max-height: 96px;
	 background: var(--background-color-footer);
	 transition-property: transform;
	 box-sizing: border-box;
	 transform: translate3d(0px, 0px, 0px); 
	 transition-duration: 0ms;
	 transition-timing-function: ease-out;
	 text-align: left;
	 list-style: none;
 }

 .wt_fig_carousel_group_title{
	 display: block;
	 margin: 0 12px;
	 color: var(--font-color-fig-carousel-title);
	 font-family: inherit;
	 font-size: 14px;
	 font-style: italic;
	 line-height: 20px;
	 text-align: center;
 }

 .wt_fig_carousel_text_slide{
	 width: 100%;
	 height: auto;
 }
 
 .wt_fig_carousel_text_block{
	 position: relative;
	 display: block;
	 width: 100%; 
	 height: auto;
	 /* 2026-07-27：更新点：适度放宽轮播文字项的上下间距，提升连续条目的可读性。 */
	 padding: 4px 12px;
	 background: var(--background-color-footer);
	 cursor: pointer;
	 box-sizing: border-box;
	 transform: translateZ(0);
	 backface-visibility: hidden;
	 flex-shrink: 0;
	 transition-property: transform;
 }
 
 .wt_fig_carousel_text_block.active .wt_fig_carousel_title{
	 color: var(--font-color-menu-selected);
 }
 
 .wt_fig_carousel_text_block.active .wt_fig_carousel_para{
	 color: var(--font-color-menu-selected);
 }
 
 .wt_fig_carousel_title{
	 /* 2026-07-13：更新点：轮播文字使用普通块级文本流，避免多行标题换行后无法左对齐。 */
	 display: block;
	 text-align: left;
	 font-size: 14px;
	 line-height: 20px;
	 color: var(--font-color-fig-carousel-title);
	 padding-bottom: 0px;
 }
 
 .wt_fig_carousel_para{
	 /* 2026-07-13：更新点：轮播说明使用普通块级文本流，保证多行段落按同一左边界换行。 */
	 display: block;
	 text-align: left;
	 font-size: 12px;
	 line-height: 18px;
	 color: var(--font-color-fig-carousel-para);
	 max-height: 72px;
	 overflow-y: auto;
 }

 @media only screen and (min-width: 769px){
	 /* 2026-07-23：更新点：PC端横图、竖图和视频统一保持上下布局，长说明由紧凑文字区滚动。 */
	 .wt_fig_carousel_text_content .wt_fig_carousel_para{
		 max-height: none;
		 overflow-y: visible;
	 }
 }
 
 .wt_fig_carousel_para .p{
	 margin: 0;
	 text-align: left;
 }
 
 /* 左右箭头 */
 .carousel-control-prev,
 .carousel-control-next{
	 position: absolute;
	 bottom: auto;
	 z-index: 5;
	 width: 10%;
	 color: #fff;
	 text-align: center;
	 opacity: .5;
 }
 
 .carousel-control-prev{
	 background-image: none;
	 width: 30px;
	 height: 30px;
	 top: calc(50% - 30px);
	 left: 15px;
 }
 
 .carousel-control-next{
	 background-image: none;
	 width: 30px;
	 height: 30px;
	 top: calc(50% - 30px);
	 right: 15px;
 }
 
 .fig_carousel_left{
	 /* position: absolute;
	 top: calc(50% - 15px);
	 z-index: 5; */
	 display: inline-block;
	 width: 30px;
	 height: 30px;
 }
 
 .fig_carousel_left:before{
	 content: "";
	 display: inline-block;
	 position: relative;
	 background-image:url("../images/swipe-left-1@2x.png");
	 background-size: 30px 30px;
	 width: 30px;
	 height: 30px;
 }
 
 .fig_carousel_right{
	 /* position: absolute;
	 top: calc(50% - 15px);
	 z-index: 5; */
	 display: inline-block;
	 width: 30px;
	 height: 30px;
 }
 
 .fig_carousel_right:before{
	 content: "";
	 display: inline-block;
	 position: relative;
	 background-image:url("../images/swipe-right-1@2x.png");
	 background-size: 30px 30px;
	 width: 30px;
	 height: 30px;
 }
 
 /* 红点指示器 */
 .carousel-indicators{
	 right: auto;
	 bottom: 1px;
	 left: 50%;
	 display: block;
	 width: 60%;
	 padding-left: 0;
	 margin-right: 0;
	 margin-bottom: 0px;
	 margin-left: -30%;
	 text-align: center;
	 list-style: none;
	 background-color: none;
 }
 
 .carousel-indicators li[data-bs-target]{
	 display: inline-block;
	 flex: none;
	 width: 32px;
	 height: 4px;
	 padding: 0;
	 border: none;
	 border-radius: 64px;
	 margin: 0px 4px;
	 background-color: var(--background-color-fig-carousel-spot);
	 background-clip: border-box;
	 box-sizing: border-box;
	 text-indent: 0;
	 opacity: 1;
	 transition: none;
 }
 
 .carousel-indicators li[data-bs-target].active{
	 display: inline-block;
	 flex: none;
	 width: 32px;
	 height: 4px;
	 padding: 0;
	 border: none;
	 border-radius: 64px;
	 margin: 0px 4px;
	 background-color: var(--background-color-primary-button);
	 background-clip: border-box;
	 box-sizing: border-box;
	 text-indent: 0;
	 opacity: 1;
 }

/* 轮播控件默认隐藏，多 item 时 JS 添加 has-multiple-items 才显示 */
.fig.fignone.carousel.slide .carousel-control-prev,
.fig.fignone.carousel.slide .carousel-control-next,
.fig.fignone.carousel.slide .carousel-indicators {
    display: none;
}
.fig.fignone.carousel.slide.has-multiple-items .carousel-control-prev,
.fig.fignone.carousel.slide.has-multiple-items .carousel-control-next,
.fig.fignone.carousel.slide.has-multiple-items .carousel-indicators {
    display: block;
}

/* ==========================================================================
   9. 视频播放器样式 (Video Player)
   ========================================================================== */
/* 视频容器 */
/* outputclass="gif" uses a fixed frame and Apple-style playback controls. */
.fig.fignone.gif {
    position: relative;
    align-self: center;
    flex: 0 0 auto;
    width: min(980px, calc(100% - 112px));
    max-width: 980px;
    margin: 16px auto;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

.fig.fignone.gif .wt_fig_gif_stage {
    position: relative;
    width: 100%;
    max-height: min(var(--wt-fig-gif-max-height, 720px), 75vh);
    aspect-ratio: var(--wt-fig-gif-aspect-ratio, 16 / 9);
    overflow: hidden;
    padding: 16px;
    border-radius: 10px;
    background: #fafafc;
    box-sizing: border-box;
}

.fig.fignone.gif .wt_fig_gif_source {
    display: none;
}

.fig.fignone.gif .wt_fig_gif_frame {
    position: absolute;
    inset: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms linear, visibility 0s linear 120ms;
}

.fig.fignone.gif .wt_fig_gif_frame.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.fig.fignone.gif .wt_fig_gif_frame > img.image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.fig.fignone.gif .wt_fig_gif_controls {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
}

.fig.fignone.gif .wt_fig_gif_control {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #6e6e73;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms,
        background-color 180ms ease;
}

.fig.fignone.gif .wt_fig_gif_control.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.fig.fignone.gif .wt_fig_gif_control:hover,
.fig.fignone.gif .wt_fig_gif_control:focus-visible {
    color: #1d1d1f;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
}

.fig.fignone.gif .wt_fig_gif_control:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.fig.fignone.gif .wt_fig_gif_control span {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
}

.fig.fignone.gif .wt_fig_gif_play span::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid currentColor;
}

.fig.fignone.gif .wt_fig_gif_pause span::before {
    content: "";
    position: absolute;
    inset: 2px 3px;
    background: linear-gradient(to right, currentColor 0 5px, transparent 5px 8px, currentColor 8px 13px);
}

.fig.fignone.gif .wt_fig_gif_replay span::before {
    content: "\21BB";
    position: absolute;
    inset: -3px 0 0;
    color: currentColor;
    font-size: 23px;
    line-height: 24px;
    text-align: center;
    font-family: Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .fig.fignone.gif .wt_fig_gif_frame,
    .fig.fignone.gif .wt_fig_gif_control {
        transition: none;
    }
}

/* outputclass="gallery" follows the Apple Newsroom gallery proportions. */
.wt_fig_carousel_layout > .fig.fignone.carousel.slide.gallery {
    position: relative;
    align-self: center;
    flex: 0 0 auto;
    overflow: visible;
    width: min(980px, calc(100% - 112px));
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content {
    align-self: center;
    flex: 0 0 auto;
    width: min(980px, calc(100% - 112px));
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 0 0;
    background: transparent;
}

/* Gallery always keeps its caption and indicators below the media.
   outputclass="top" is intentionally ignored for this layout. */
.wt_fig_carousel_layout.wt_fig_carousel_text_top:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content {
    order: 0 !important;
}

@media (max-width: 1068px) {
    .wt_fig_carousel_layout > .fig.fignone.carousel.slide.gallery,
    .wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
    > .wt_fig_carousel_text_content {
        width: min(576px, calc(100% - 112px));
        max-width: 576px;
    }
}

.fig.fignone.carousel.slide.gallery .carousel-inner {
    position: relative;
    height: var(--wt-gallery-inner-height, auto) !important;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    background: #FAFAFC;
    box-sizing: border-box;
}

/* Pure 9:16 image galleries narrow and center both the colored media canvas
   and its caption. Dimensions are locked for the whole gallery, so changing
   slides cannot resize or flash the media frame. */
.fig.fignone.carousel.slide.gallery.wt_gallery_portrait_images .carousel-inner {
    width: min(100%, var(--wt-gallery-portrait-frame-width, 100%)) !important;
    margin-left: auto;
    margin-right: auto;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery.wt_gallery_portrait_images)
> .wt_fig_carousel_text_content {
    width: min(100%, var(--wt-gallery-portrait-frame-width, 100%));
    max-width: none;
}

.fig.fignone.carousel.slide.gallery.wt_gallery_portrait_pending {
    visibility: hidden !important;
}

.fig.fignone.carousel.slide.gallery.wt_gallery_portrait_images .carousel-control-prev {
    left: calc(50% - var(--wt-gallery-portrait-frame-half-width, 50%) - 56px);
}

.fig.fignone.carousel.slide.gallery.wt_gallery_portrait_images .carousel-control-next {
    right: calc(50% - var(--wt-gallery-portrait-frame-half-width, 50%) - 56px);
}

.fig.fignone.carousel.slide.gallery .carousel-inner > .carousel-item {
    height: var(--wt-gallery-item-height, auto) !important;
    min-height: 0;
    width: 100%;
    border-radius: 6px;
    background: #FAFAFC;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

.fig.fignone.carousel.slide.gallery .carousel-inner > .carousel-item > img.image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0;
    object-fit: contain;
    flex: 0 1 auto;
    vertical-align: middle;
    background: #FAFAFC;
}

/* A video-only Gallery uses one locked media canvas. Later videos are fitted
   inside it and can never change the carousel height. */
.fig.fignone.carousel.slide.gallery.wt_gallery_video_only {
    aspect-ratio: var(--wt-gallery-video-aspect-ratio, 16 / 9);
}

.fig.fignone.carousel.slide.gallery.wt_gallery_video_only .carousel-inner {
    height: auto !important;
    aspect-ratio: var(--wt-gallery-video-aspect-ratio, 16 / 9);
}

.fig.fignone.carousel.slide.gallery.wt_gallery_video_only
.carousel-inner > .carousel-item {
    height: 100% !important;
    min-height: 0;
    overflow: hidden !important;
}

.fig.fignone.carousel.slide.gallery.wt_gallery_video_only
.carousel-inner > .carousel-item.wt_carousel_video_item.active,
.fig.fignone.carousel.slide.gallery.wt_gallery_video_only
.carousel-inner > .carousel-item.wt_carousel_video_item.carousel-item-next,
.fig.fignone.carousel.slide.gallery.wt_gallery_video_only
.carousel-inner > .carousel-item.wt_carousel_video_item.carousel-item-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.fig.fignone.carousel.slide.gallery.wt_gallery_video_only
.carousel-inner > .carousel-item.wt_carousel_video_item.carousel-item-next,
.fig.fignone.carousel.slide.gallery.wt_gallery_video_only
.carousel-inner > .carousel-item.wt_carousel_video_item.carousel-item-prev {
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px) !important;
}

.fig.fignone.carousel.slide.gallery
.carousel-inner > .carousel-item.wt_carousel_image_item.active {
    display: flex !important;
    position: relative;
    overflow: hidden;
}

.fig.fignone.carousel.slide.gallery
.carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-next,
.fig.fignone.carousel.slide.gallery
.carousel-inner > .carousel-item.wt_carousel_image_item.carousel-item-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px !important;
    left: 16px !important;
    width: calc(100% - 32px);
    height: var(--wt-gallery-item-height, auto) !important;
    overflow: hidden;
}

.fig.fignone.carousel.slide.gallery .carousel-control-prev,
.fig.fignone.carousel.slide.gallery .carousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    bottom: auto;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #FAFAFC;
    box-shadow: none;
    opacity: 1;
    transition: background-color 180ms ease;
}

.fig.fignone.carousel.slide.gallery .carousel-control-prev:hover,
.fig.fignone.carousel.slide.gallery .carousel-control-next:hover,
.fig.fignone.carousel.slide.gallery .carousel-control-prev:focus-visible,
.fig.fignone.carousel.slide.gallery .carousel-control-next:focus-visible {
    background-color: #FAFAFC;
}

.fig.fignone.carousel.slide.gallery .carousel-control-prev {
    left: -56px;
}

.fig.fignone.carousel.slide.gallery .carousel-control-next {
    right: -56px;
}

.fig.fignone.carousel.slide.gallery .fig_carousel_left,
.fig.fignone.carousel.slide.gallery .fig_carousel_right {
    display: block;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    margin: 0;
}

.fig.fignone.carousel.slide.gallery .fig_carousel_left:before,
.fig.fignone.carousel.slide.gallery .fig_carousel_right:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    filter: brightness(0) saturate(100%);
}

.fig.fignone.carousel.slide.gallery .fig_carousel_left:before {
    background-image: url("../images/swipe-left-2@2x.png");
}

.fig.fignone.carousel.slide.gallery .fig_carousel_right:before {
    background-image: url("../images/swipe-right-2@2x.png");
}

.fig.fignone.carousel.slide.gallery .carousel-indicators,
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .carousel-indicators {
    position: static;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 12px;
    margin: 1em 1em 0;
    padding: 0;
    line-height: 0;
    background: transparent;
    box-sizing: border-box;
    list-style: none;
    pointer-events: auto;
}

.fig.fignone.carousel.slide.gallery .carousel-indicators li[data-bs-target],
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .carousel-indicators li[data-bs-target] {
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    position: relative;
    margin: 0 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #d2d2d7;
    background-clip: border-box;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    opacity: 1;
    cursor: pointer;
    transition: background-color 120ms linear;
}

.fig.fignone.carousel.slide.gallery .carousel-indicators li[data-bs-target]::after,
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .carousel-indicators li[data-bs-target]::after {
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
}

.fig.fignone.carousel.slide.gallery .carousel-indicators li[data-bs-target].active,
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .carousel-indicators li[data-bs-target].active {
    flex-basis: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--background-color-primary-button);
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_text_indicators {
    max-height: none;
    overflow: visible;
    background: transparent;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .carousel-indicators {
    position: static;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_text_block {
    display: none;
    padding: 0;
    background: transparent;
    text-align: center;
    animation: wt-gallery-caption-in 420ms cubic-bezier(.16, 1, .3, 1);
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_text_block.active {
    display: block;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_title,
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_para,
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_para .p {
    text-align: center;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_title {
    color: #1d1d1f;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_para,
.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_para .p {
    max-height: none;
    color: #6e6e73;
    font-size: 12px;
    line-height: 18px;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_para {
    margin-top: 8px;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_text_content .wt_fig_carousel_text_slide {
    background: transparent;
}

@keyframes wt-gallery-caption-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .fig.fignone.carousel.slide.gallery .carousel-control-prev,
    .fig.fignone.carousel.slide.gallery .carousel-control-next,
    .fig.fignone.carousel.slide.gallery .carousel-indicators li[data-bs-target],
    .wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
    > .wt_fig_carousel_text_content .wt_fig_carousel_text_block {
        transition: none;
        animation: none;
    }
}

.wt_video_container {
   position: relative;
   display: inline-block;
   width: 100%;
   max-width: 960px;
   margin: 20px 0;
   box-sizing: border-box;
   border: 1px solid #E8E8E8;
   border-radius: 6px;
   overflow: hidden;
   /* 2026-08-24：更新点：去掉视频容器外阴影，避免底部边缘出现灰色阴影线。 */
   box-shadow: none;
   background: #F7F8F9;
   cursor: pointer;
   touch-action: manipulation;
   min-height: 0;
 }

/* 轮播图中的视频容器 - 去掉独立视频的卡片外观 */
 .wt_video_container.wt_in_carousel {
   max-width: 100%;
   margin: 0;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   background: transparent;
 }

 /* 普通视频容器承担入场动画，避免覆盖 video 的首帧可见性规则。 */
 .wt_video_container.wt_media_reveal {
   overflow: hidden;
 }

/* 2026-08-22 更新点：从HTML首帧起隐藏未初始化视频，避免原生controls底部黑边闪现。 */
video:not([data-wt-initialized]),
video[data-wt-initialized="false"] {
   visibility: hidden !important;
   opacity: 0 !important;
}

/* 2026-08-22 更新点：首帧解码后直接显示，避免透明度过渡合成出底部黑边。 */
video[data-wt-initialized="true"] {
   visibility: visible !important;
   opacity: 1 !important;
}

/* 原生移动端视频同时等待首帧和视口进入，覆盖上方首帧可见性规则。 */
video.wt_media_reveal:not(.wt_media_reveal_visible) {
   visibility: hidden !important;
   opacity: 0 !important;
}

video.wt_media_reveal.wt_media_reveal_visible {
   visibility: visible !important;
   opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
   video.wt_media_reveal,
   video.wt_media_reveal:not(.wt_media_reveal_visible),
   video.wt_media_reveal.wt_media_reveal_visible {
      visibility: visible !important;
      opacity: 1 !important;
      transform: none;
      transition: none;
   }
}

/* 视频加载占位符 - 在自定义播放器初始化前显示 */
/* 使用内联样式设置高度，避免黑帧闪烁 */
.wt_video_placeholder {
   position: absolute;
   inset: 0;
   width: auto;
   height: auto !important;
   background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
   background-size: 200% 200%;
   animation: placeholderShimmer 2s ease-in-out infinite;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 0;
}

.wt_video_placeholder_error {
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 20px;
   color: #fff;
   font-size: 14px;
   text-align: center;
}

.wt_video_retry_button {
   min-width: 72px;
   padding: 7px 16px;
   border: 1px solid rgba(255,255,255,.72);
   border-radius: 999px;
   color: #fff;
   background: transparent;
   cursor: pointer;
}

.wt_video_retry_button:hover,
.wt_video_retry_button:focus-visible {
   border-color: #fff;
   background: rgba(255,255,255,.12);
   outline: none;
}

.wt_video_container.wt_error .wt_video_placeholder {
   animation: none;
   background: #24272b;
}

.wt_video_container.wt_error .wt_video_placeholder_spinner {
   display: none;
}

.wt_video_container.wt_error .wt_video_placeholder_error {
   display: flex;
}

.wt_video_container.wt_pending .wt_video_play_overlay,
.wt_video_container.wt_pending .wt_video_controls,
.wt_video_container.wt_error .wt_video_play_overlay,
.wt_video_container.wt_error .wt_video_controls {
   display: none !important;
}

.wt_fig_carousel_layout:has(> .fig.fignone.carousel.slide.gallery)
> .wt_fig_carousel_group_title {
    color: #86868b;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
}

@keyframes placeholderShimmer {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
   .wt_video_placeholder {
      animation: none;
   }
}

/* 占位符加载完成后隐藏 */
.wt_video_container.wt_ready .wt_video_placeholder {
   display: none;
}

 .wt_video_container video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
/* 播放按钮遮罩层*/
.wt_video_play_overlay {
   position: absolute;
   bottom: 62px;
   right: 30px;
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   opacity: 0;
   transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
   pointer-events: none;
   transform: translateY(calc(-50% + 12px));
     z-index: 10;   
 }
 
 .wt_video_container:hover .wt_video_play_overlay,
 .wt_video_container.wt_controls_persistent .wt_video_play_overlay,
 .wt_video_play_overlay:has(.wt_video_play_icon:focus-visible) {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%);
   transition-delay: 0s;
 }
 
/* 播放按钮图标 */
.wt_video_play_icon {
   padding: 0;
   border: 0;
   width: 40px;
   height: 40px;
   background: linear-gradient(
     135deg,
     color-mix(in srgb, var(--background-color-primary-button) 94%, transparent) 0%,
     color-mix(in srgb, var(--background-color-primary-button) 78%, transparent) 50%,
     color-mix(in srgb, var(--background-color-primary-button) 94%, transparent) 100%
   );
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 
     0 0 12px color-mix(in srgb, var(--background-color-primary-button) 58%, transparent),
     0 0 24px color-mix(in srgb, var(--background-color-primary-button) 34%, transparent),
     inset 0 0 12px rgba(255, 255, 255, 0.2);
   position: relative;
   pointer-events: auto;
   cursor: pointer;
 }

.wt_video_play_icon:focus-visible,
.wt_video_btn:focus-visible,
.wt_video_volume_btn:focus-visible {
   outline: 2px solid #ffffff;
   outline-offset: 2px;
}
 
 .wt_video_play_icon::after {
   content: '';
   position: absolute;
   top: -4px;
   left: -4px;
   right: -4px;
   bottom: -4px;
   border-radius: 50%;
   background: transparent;
   border: 2px solid color-mix(in srgb, var(--background-color-primary-button) 40%, transparent);
   animation: pulse-ring 2s ease-out infinite;
 }
 
 @keyframes pulse-ring {
   0% { transform: scale(1); opacity: 1; }
   100% { transform: scale(1.5); opacity: 0; }
 }
 
.wt_video_container:hover .wt_video_play_icon {
   transform: scale(1.15);
   box-shadow: 
     0 0 20px color-mix(in srgb, var(--background-color-primary-button) 68%, transparent),
     0 0 40px color-mix(in srgb, var(--background-color-primary-button) 36%, transparent),
     inset 0 0 20px rgba(255, 255, 255, 0.3);
 }
 
.wt_video_play_icon::before {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border-left: 12px solid #fff;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   margin-left: 2px;
 }

.wt_video_play_icon.is-playing::before {
   width: 12px;
   height: 14px;
   margin-left: 0;
   border: 0;
   background: linear-gradient(to right, #fff 0 4px, transparent 4px 8px, #fff 8px 12px);
}
 
 
/* ==========================================================================
    视频控制栏样式
   ========================================================================== */
 .wt_video_controls {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 0 8px 8px 8px;
   background: transparent;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px);
   transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
   box-sizing: border-box;
   pointer-events: none;
   z-index: 20; 
 }
 
 /* 悬停时显示控制栏 */
 .wt_video_container:hover .wt_video_controls {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   transition-delay: 0s;
 }

 .wt_video_container.wt_controls_persistent .wt_video_controls,
 .wt_video_container:has(:focus-visible) .wt_video_controls {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   transition-delay: 0s;
 }

 @media (prefers-reduced-motion: reduce) {
   .wt_video_play_overlay,
   .wt_video_controls,
   .wt_video_share_feedback {
     transition: opacity 0.01ms linear;
     transform: none;
   }

   .wt_video_container:hover .wt_video_play_overlay,
   .wt_video_container.wt_controls_persistent .wt_video_play_overlay,
   .wt_video_play_overlay:has(.wt_video_play_icon:focus-visible),
   .wt_video_container:hover .wt_video_controls,
   .wt_video_container.wt_controls_persistent .wt_video_controls,
   .wt_video_container:has(:focus-visible) .wt_video_controls {
     transform: none;
   }
 }
 
 /* 进度条 */
 .wt_video_progress {
   position: relative;
   width: 100%;
   height: 16px;
   background: transparent;
   cursor: pointer;
   margin-bottom: 0;
   pointer-events: auto;
   outline: none;
 }
 
 .wt_video_progress_track {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 4px;
   border-radius: 2px;
   background-color: rgba(255, 255, 255, 0.3);
   transform: translateY(-50%);
   transition: height 0.1s ease, background-color 0.2s ease;
 }

 .wt_video_container:hover .wt_video_progress_track,
 .wt_video_container.wt_controls_persistent .wt_video_progress_track,
 .wt_video_progress:focus-visible .wt_video_progress_track {
   background-color: #7A736A;
 }
 
 .wt_video_progress:hover .wt_video_progress_track,
 .wt_video_progress:focus-visible .wt_video_progress_track {
   height: 6px;
 }

 .wt_video_progress:focus-visible .wt_video_progress_track {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
 }
 
 .wt_video_progress_buffer {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.4);
   border-radius: 2px;
 }
 
 .wt_video_progress_played {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background: linear-gradient(
     90deg,
     color-mix(in srgb, var(--background-color-primary-button) 86%, transparent) 0%,
     color-mix(in srgb, var(--background-color-primary-button) 70%, transparent) 50%,
     color-mix(in srgb, var(--background-color-primary-button) 86%, transparent) 100%
   );
   border-radius: 2px;
   box-shadow: 
     0 0 10px color-mix(in srgb, var(--background-color-primary-button) 50%, transparent),
     0 0 20px color-mix(in srgb, var(--background-color-primary-button) 32%, transparent);
 }
 
 .wt_video_progress_handle {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%) scale(0);
   width: 14px;
   height: 14px;
   background: color-mix(in srgb, var(--background-color-primary-button) 90%, transparent);
   border-radius: 50%;
   transition: all 0.2s ease;
   left: 0;
   box-shadow: 
     0 0 0 3px color-mix(in srgb, var(--background-color-primary-button) 36%, transparent),
     0 0 10px color-mix(in srgb, var(--background-color-primary-button) 50%, transparent);
 }

 @media screen and (min-width: 769px) {
   .wt_video_progress_track {
     left: 7px;
     width: calc(100% - 14px);
   }

   .wt_video_progress_buffer {
     z-index: 1;
   }

   .wt_video_progress_played {
     z-index: 2;
   }

   .wt_video_progress_handle {
     z-index: 3;
   }

   .fig.fignone.carousel.slide.gallery
   .carousel-inner > .carousel-item.wt_carousel_video_item
   video.wt_gallery_video_cover {
     object-fit: cover;
     object-position: center center;
   }
 }
 
 .wt_video_progress:hover .wt_video_progress_handle,
 .wt_video_progress:focus-visible .wt_video_progress_handle,
 .wt_video_container.wt_controls_persistent .wt_video_progress_handle {
   transform: translate(-50%, -50%) scale(1);
   box-shadow: 
     0 0 0 4px color-mix(in srgb, var(--background-color-primary-button) 30%, transparent),
     0 0 15px color-mix(in srgb, var(--background-color-primary-button) 60%, transparent);
 }
 
 /* 控制栏行容器 */
 .wt_video_controls_row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
 
 .wt_video_controls_left,
 .wt_video_controls_right {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: rgba(20, 20, 20, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}

 .wt_video_share_feedback {
   position: absolute;
   right: 16px;
   bottom: 56px;
   z-index: 30;
   max-width: min(280px, calc(100% - 32px));
   padding: 6px 10px;
   border-radius: 6px;
   color: #fff;
   background: rgba(20, 20, 20, 0.78);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   font-size: 12px;
   line-height: 1.3;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(8px);
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
 }

 .wt_video_share_feedback.is-visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   transition-delay: 0s;
 }
 
 /* 控制按钮 */
 .wt_video_btn {
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.9;
   border-radius: 50%;
   transition: all 0.2s ease;
   flex-shrink: 0; /* 禁止按钮被压缩 */
 }
 
 .wt_video_btn:hover {
   opacity: 1;
   transform: scale(1.1);
 }
 
 .wt_video_btn svg {
   width: 20px;
   height: 20px;
   fill: #fff;
   transition: all 0.2s ease;
 }
 
 .wt_video_play_pause svg {
   width: 24px;
   height: 24px;
 }
 
 /* 时间显示 */
 .wt_video_time {
   color: #fff;
   font-size: 11px;
   font-family: Roboto, Arial, sans-serif;
   opacity: 1;
   font-weight: 500;
   margin-left: 2px;
   flex-shrink: 0; /* 禁止按钮被压缩 */
 }
 
 /* 音量控制 */
.wt_video_volume_container {
   display: flex;
   align-items: center;
   gap: 0;
   height: 100%;
   pointer-events: auto;
   transition: gap 0.2s ease;
 }
 
 .wt_video_volume_btn {
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.9;
   border-radius: 50%;
   transition: all 0.2s ease;
   height: 100%;
 }
 
 .wt_video_volume_btn:hover {
   opacity: 1;
   transform: scale(1.1);
 }
 
 .wt_video_volume_btn svg {
   width: 22px;
   height: 22px;
   fill: #ffffff;
   filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
 }
 
 /* 音量滑块 */
 .wt_video_volume_slider {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 0;
   min-width: 0;
   flex: 0 0 0;
   height: 4px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 2px;
   outline: none;
   cursor: pointer;
   margin: 0;
   padding: 0;
   pointer-events: none;
   visibility: hidden;
   transition: width 0.2s ease, flex-basis 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
   opacity: 0;
   transform: scaleX(0);
   transform-origin: left;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .wt_video_volume_container:hover,
 .wt_video_volume_container:focus-within {
   gap: 8px;
 }

 .wt_video_volume_container:hover .wt_video_volume_slider,
 .wt_video_volume_container:focus-within .wt_video_volume_slider {
   width: 60px;
   flex-basis: 60px;
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
   transform: scaleX(1);
 }

 .wt_video_volume_container.is-muted,
 .wt_video_volume_container.is-muted:hover,
 .wt_video_volume_container.is-muted:focus-within {
   gap: 0;
 }

 .wt_video_volume_container.is-muted .wt_video_volume_slider,
 .wt_video_volume_container.is-muted:hover .wt_video_volume_slider,
 .wt_video_volume_container.is-muted:focus-within .wt_video_volume_slider {
   width: 0;
   flex-basis: 0;
   pointer-events: none;
   visibility: hidden;
   opacity: 0;
   transform: scaleX(0);
 }

 .wt_video_volume_slider.hidden,
 .wt_video_volume_slider.initial-hidden {
   opacity: 0;
   transform: scaleX(0);
   width: 0;
   flex-basis: 0;
   pointer-events: none;
   visibility: hidden;
 }
 
 
 .wt_video_volume_slider::-webkit-slider-runnable-track {
   background: #ffffff;
   border-radius: 2px;
   height: 4px;
 }
 
 .wt_video_volume_slider::-moz-range-track {
   background: #ffffff;
   border-radius: 2px;
   height: 4px;
 }
 
 .wt_video_volume_slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px;
   height: 12px;
   background: #ffffff;
   border-radius: 50%;
   cursor: pointer;
   margin-top: -4px;
   box-shadow: 
     0 0 0 2px rgba(255, 255, 255, 0.2),
     0 0 10px rgba(255, 255, 255, 0.3);
   transition: all 0.2s ease;
 }
 
 .wt_video_volume_slider::-webkit-slider-thumb:hover {
   transform: scale(1.4);
   box-shadow: 
     0 0 0 3px rgba(255, 255, 255, 0.3),
     0 0 15px rgba(255, 255, 255, 0.5);
 }
 
 .wt_video_volume_slider::-moz-range-thumb {
   width: 12px;
   height: 12px;
   background: #ffffff;
   border-radius: 50%;
   cursor: pointer;
   border: none;
   margin-top: -4px;
   box-shadow: 
     0 0 0 2px rgba(255, 255, 255, 0.2),
     0 0 10px rgba(255, 255, 255, 0.3);
   transition: all 0.2s ease;
 }
 
 .wt_video_volume_slider::-moz-range-thumb:hover {
   transform: scale(1.4);
   box-shadow: 
     0 0 0 3px rgba(255, 255, 255, 0.3),
     0 0 15px rgba(255, 255, 255, 0.5);
 }
 
 /* ==========================================================================
    10. 代码块样式
   ========================================================================== */
 /* 代码块容器 */
 .pre.codeblock {
   position: relative; /* 为复制按钮绝对定位提供参考 */
   display: block;
   box-sizing: border-box;
   max-width: 100%;
   margin: 12px 0;
   padding: 14px 52px 14px 14px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: pre;
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 13px;
   line-height: 1.55;
   color: #2f3742;
   background-color: #f5f7fa;
   border: 1px solid #dfe3e8;
   border-radius: 4px;
 }
   
 /* 复制按钮样式 */
 .copy-btn {
   position: absolute;
   top: 8px;
   right: 8px;
   background-color: #ffffff;
   border: 1px solid #d1d5da;
   border-radius: 4px;
   padding: 4px 8px;
   font-size: 12px;
   color: #24292e;
   cursor: pointer;
   opacity: 0.7; /* 默认半透明 */
   transition: opacity 0.2s ease-in-out;
   z-index: 10; /* 确保按钮在代码内容之上 */
 }
   
 .copy-btn:hover {
   opacity: 1;
   background-color: #f3f4f6;
 }
 
/* ==========================================================================
    11. 倍速控制样式
   ========================================================================== */
/* 倍速按钮容器 */
.wt_video_speed_container {
   position: relative;
   display: flex;
   align-items: center;
}

/* 倍速按钮 */
.wt_video_speed {
   min-width: 40px;
   height: 100%;
   padding: 4px 8px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wt_video_speed_text {
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   font-family: Roboto, Arial, sans-serif;
}

/* 倍速下拉菜单 */
.wt_video_speed_dropdown {
   position: absolute;
   bottom: 100%;
   right: 0;
   background: linear-gradient(180deg, rgba(35, 35, 35, 0.98) 0%, rgba(25, 25, 25, 0.98) 50%, rgba(20, 20, 20, 0.98) 100%);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: 12px;
   padding: 8px 0;
   min-width: 90px;
   max-height: 200px;
   overflow-x: hidden;
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px) scale(0.95);
   transform-origin: bottom right;
   transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.5),
      0 4px 16px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.08);
   z-index: 100;
   margin-bottom: 10px;
}

/* 倍速下拉菜单滚动条样式 - 细长简洁设计 */
.wt_video_speed_dropdown::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.wt_video_speed_dropdown::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 2px;
}

.wt_video_speed_dropdown::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 2px;
   transition: background 0.2s ease;
}

.wt_video_speed_dropdown::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.35);
}

.wt_video_speed_dropdown::-webkit-scrollbar-corner {
   background: transparent;
}

.wt_video_speed_dropdown::before {
   content: '';
   position: absolute;
   bottom: -7px;
   right: 16px;
   width: 14px;
   height: 14px;
   background: linear-gradient(45deg, rgba(25, 25, 25, 0.98) 0%, rgba(35, 35, 35, 0.98) 100%);
   transform: rotate(45deg);
   border-right: 1px solid rgba(255, 255, 255, 0.06);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wt_video_speed_dropdown.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

/* 倍速选项 */
.wt_video_speed_option {
   box-sizing: border-box;
   border: 0;
   background: transparent;
   padding: 10px 20px;
   color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
   font-family: Roboto, Arial, sans-serif;
   cursor: pointer;
   text-align: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   width: 100%;
   margin: 2px auto;
   letter-spacing: 0.5px;
}

.wt_video_speed_option:focus-visible {
   outline: 2px solid #ffffff;
   outline-offset: -3px;
}

.wt_video_speed_option:hover {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
   color: #fff;
   transform: scale(1.04);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.wt_video_speed_option.active {
   background: color-mix(in srgb, var(--background-color-primary-button) 38%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--background-color-primary-button) 90%, transparent);
}

 
 /* ==========================================================================
    12. 手风琴分组样式 (Accordion Group)
   ========================================================================== */
 /* 2026-08-14 更新点：新增 outputclass="accordion-group" 的默认折叠列表。 */
 :is(ol.ol, ul.ul).accordion-group.wt_accordion_ready {
	 margin: 16px 0;
	 padding: 0;
	 overflow: hidden;
	 border: 1px solid #E5E7EB;
	 border-radius: 8px;
	 background-color: var(--background-color-normal);
	 list-style: none;
 }

 :is(ol.ol, ul.ul).accordion-group.wt_accordion_ready > li.wt_accordion_item {
	 margin: 0 !important;
	 padding: 0;
	 list-style: none;
 }

 :is(ol.ol, ul.ul).accordion-group.wt_accordion_ready > li.wt_accordion_item + li.wt_accordion_item {
	 border-top: 1px solid #E5E7EB;
 }

 .wt_accordion_item_details {
	 margin: 0;
	 padding: 0;
 }

 .wt_accordion_summary {
	 display: flex;
	 align-items: center;
	 gap: 16px;
	 min-height: 52px;
	 padding: 14px 18px;
	 color: var(--font-color-section-title);
	 background-color: transparent;
	 cursor: pointer;
	 list-style: none;
	 transition: background-color 160ms ease;
 }

 .wt_accordion_summary::-webkit-details-marker {
	 display: none;
 }

 .wt_accordion_summary::marker {
	 content: "";
 }

 .wt_accordion_summary:hover {
	 background-color: #FAFAFA;
 }

 .wt_accordion_summary:focus-visible {
	 outline: 2px solid #8AA9CC;
	 outline-offset: -3px;
 }

 .wt_accordion_summary > span.ph:first-child {
	 display: block;
	 flex: 1 1 auto;
	 min-width: 0;
	 margin: 0;
	 color: inherit;
	 font-size: 14px;
	 font-weight: 600;
	 line-height: 22px;
 }

 .wt_accordion_chevron {
	 position: relative;
	 flex: 0 0 18px;
	 width: 18px;
	 height: 18px;
 }

 .wt_accordion_chevron::before {
	 content: "";
	 position: absolute;
	 top: 5px;
	 left: 4px;
	 width: 7px;
	 height: 7px;
	 border-right: 1.5px solid #6B7280;
	 border-bottom: 1.5px solid #6B7280;
	 transform: rotate(-45deg);
	 transition: transform 160ms ease;
 }

 .wt_accordion_item_details[open] > .wt_accordion_summary .wt_accordion_chevron::before {
	 transform: rotate(45deg);
 }

 .wt_accordion_content {
	 padding: 0 18px 18px;
	 color: var(--font-color-topic-content);
 }

 .wt_accordion_content > :first-child {
	 margin-top: 0;
 }

 .wt_accordion_content > :last-child,
 .wt_accordion_content > :last-child > :last-child {
	 margin-bottom: 0;
 }

 @media (prefers-reduced-motion: reduce) {
	 .wt_accordion_summary,
	 .wt_accordion_chevron::before {
		 transition: none;
	 }
 }

 /* 2026-09-29 更新点：新增 outputclass="accordion-app" / "accordion-app-open" 的 App 卡片式手风琴。
    复刻 Reference/landing page_hc.html 的折叠卡片样式：
    - 容器为等高网格，桌面每行 3 张；卡片本身无边框；
    - 图标为裸图（无圆形底），标题在左，右侧为圆形箭头按钮；
    - #F0F5FA 背景盒只出现在展开后的内容面板（圆角 + 轻阴影）；
    - accordion-app-open 变体默认展开。
    整卡配色：色值类（容器 outputclass 上的 3/6 位十六进制）经 JS 写入 --wt-accordion-app-color，
    默认取 Reference 的 #F0F5FA，用于展开内容面板底色与圆形箭头底色。 */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 36px;
     margin: 16px 0;
     padding: 0;
     list-style: none;
     align-items: stretch;
 }

 /* 每行最多 4 张（gap 36px × 3 = 108px）；不满行由 justify-content:center 居中。 */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready > .wt_accordion_item {
     display: flex;
     flex-direction: column;
     flex: 0 1 calc((100% - 108px) / 4);
     min-width: 0;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     list-style: none;
     /* 卡片收起时无边框无底色，同 Reference 透明头部 */
     color: inherit;
     border: 0;
     line-height: normal;
 }
 /* 复位通用 .section 规则的漏网：.section > *:not(.sectiontitle) 会把卡片里的头/面板加上左边距；
    手风琴卡片的直接子节点（button 头、内容面板）应不带缩进，与 li 卡片视觉一致。 */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready > .wt_accordion_item > *:not(.sectiontitle) {
     margin-left: 0;
 }

 /***** 头部（Summary）：标题左、圆形箭头右，可点击。app 头是 button，需复位浏览器默认（居中文本/边框/底色） *****/
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_summary {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     gap: 12px;
     min-height: 56px;
     padding: 14px 0;
     margin: 0;
     text-align: left;
     font: inherit;
     color: inherit;
     background-color: transparent;
     border: 0;
     box-shadow: none;
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: transparent;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_summary:hover,
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_summary:active,
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_summary:focus {
     background-color: transparent;
 }

 /* 图标：裸图，无圆形底（与 Reference 一致） */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_app_icon {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     border-radius: 0;
     background-color: transparent;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_app_icon > img.image {
     display: block !important;
     width: 24px !important;
     height: 24px !important;
     max-width: 24px;
     max-height: 24px;
     margin: 0;
     object-fit: contain;
 }

 /* 标题：flex 撑满，把箭头推到最右（li 卡片为 span.ph、section 卡片为 h2.sectiontitle） */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_summary > :is(span.ph, h2.sectiontitle) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
     color: var(--font-color-section-title);
     font-size: 14px;
     font-weight: 600;
     line-height: 22px;
 }

 /***** 圆形箭头按钮（右侧） *****/
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_chevron {
     position: relative;
     flex: 0 0 28px;
     width: 28px;
     height: 28px;
     margin-left: auto;
     border-radius: 50%;
     background-color: var(--wt-accordion-app-color, #F0F5FA);
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_chevron::before {
     content: "";
     position: absolute;
     top: 10px;
     left: 10px;
     width: 7px;
     height: 7px;
     border-right: 1.5px solid #6B7280;
     border-bottom: 1.5px solid #6B7280;
     transform: rotate(-45deg);
     transition: transform 160ms ease;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_app_head.wt_accordion_app_active .wt_accordion_chevron::before {
     transform: rotate(45deg);
 }

 /***** 内容面板：div 面板，收起时 max-height:0 隐藏；展开时平滑伸/收（复刻 Reference 的 max-height/opacity/transform 动效） *****/
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_app_panel {
     margin: 4px 0 0;
     padding: 0 20px;
     border-radius: 25px;
     background-color: var(--wt-accordion-app-color, #F0F5FA);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     transform: translateY(-8px);
     transition:
         max-height 0.4s cubic-bezier(0.32, 0.72, 0.46, 1),
         opacity 0.3s ease-out,
         transform 0.3s cubic-bezier(0.32, 0.72, 0.46, 1);
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_app_panel.wt_accordion_app_open {
     opacity: 1;
     transform: translateY(0);
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_app_panel .wt_accordion_content {
     margin: 0;
     padding: 10px 0;
     color: var(--font-color-topic-content);
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content > :first-child {
     margin-top: 0;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content > :last-child,
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content > :last-child > :last-child {
     margin-bottom: 0;
 }

 /* 展开面板内列表：12px 小字，对齐 Reference 的 FAQ 列表样式 */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content > .ul {
     margin: 0 0 8px;
     padding: 0;
     list-style: none;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content > .ul > .li {
     margin: 0;
     padding: 0;
     font-size: 12px;
     line-height: 20px;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content > .ul > .li + .li {
     margin-top: 8px;
 }

 /* 展开面板内链接：12px 黑色，hover 变蓝 #0256CF（对齐 Reference） */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content a {
     color: var(--font-color-topic-content);
     font-size: 12px;
     line-height: 20px;
     text-decoration: none;
     transition: color 160ms ease;
 }
 @media (hover: hover) and (pointer: fine) {
     :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content a:hover {
         color: #0256CF;
         text-decoration: none;
     }
 }

 /* Learn More：纯文字 + 右箭头，蓝字，悬浮箭头随 currentColor 一起变蓝（复刻 Reference 的 .action） */
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content .ph.action > a {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 8px;
     padding: 4px 8px;
     border-radius: 8px;
     color: #0256CF;
     background-color: transparent;
     font-size: 12px;
     font-weight: 600;
     line-height: 20px;
     text-decoration: none;
     transition: color 160ms ease;
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content .ph.action > a::after {
     content: "";
     display: block;
     flex: 0 0 14px;
     width: 14px;
     height: 14px;
     background-color: currentColor;
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z'/%3E%3C/svg%3E") center / contain no-repeat;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 @media (hover: hover) and (pointer: fine) {
     :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content .ph.action > a:hover {
         color: #0256CF;
         text-decoration: none;
     }
 }
 :is(ol.ol, ul.ul, div.section):is(.accordion-app, .accordion-app-open).wt_accordion_ready .wt_accordion_content .ph.action > a:focus-visible {
     outline: 2px solid rgba(46, 133, 232, 0.32);
     outline-offset: 2px;
 }

 /* ==========================================================================
    13. 标签页样式 (Tab)
   ========================================================================== */
/* Tab 容器基础样式 */
 .wt-tabbed {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     margin: 24px 0;
     position: relative;
 }
 
 /* 隐藏原始的列表样式 */
 .wt-tabbed.ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .wt-tabbed > .li {
     display: none;
 }
 
 /* Tab 包装容器 - 卡片式设计 */
 .wt-tabbed-wrapper {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     padding: 16px;
     margin: 16px 0;
 }
 
 /* Tab 导航栏滚动包装器 */
 .tab-header-scroll-wrapper {
     position: relative;
     margin-bottom: 16px;
 }

 .tab-header-scroll-wrapper::before,
 .tab-header-scroll-wrapper::after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     width: 56px;
     z-index: 10;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .tab-header-scroll-wrapper::before {
     left: 0;
     background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0));
 }

 .tab-header-scroll-wrapper::after {
     right: 0;
     background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0));
 }

 .tab-header-scroll-wrapper.can-scroll-left::before {
     opacity: 1;
 }

 .tab-header-scroll-wrapper.can-scroll-right::after {
     opacity: 1;
 }

 /* 左右滚动按钮 */
 .tab-scroll-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 28px;
     height: 28px;
     padding: 0;
     border: none;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
     cursor: pointer;
     z-index: 11;
     opacity: 0;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
 }

 .tab-scroll-btn:hover {
     background: #f3f4f6;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(99, 102, 241, 0.2);
 }

 .tab-scroll-btn:hover::before {
     background-color: #6366f1;
 }

 .tab-scroll-btn:active {
     transform: translateY(-50%) scale(0.92);
 }

 .tab-scroll-btn::before {
     content: "";
     width: 12px;
     height: 12px;
     background-color: #64748b;
     -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") center/contain no-repeat;
             mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") center/contain no-repeat;
     transition: background-color 0.2s ease;
 }

 .tab-scroll-prev {
     left: 2px;
 }

 .tab-scroll-next {
     right: 2px;
 }

 .tab-scroll-next::before {
     -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") center/contain no-repeat;
             mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") center/contain no-repeat;
 }

 .tab-header-scroll-wrapper.can-scroll-left .tab-scroll-prev,
 .tab-header-scroll-wrapper.can-scroll-right .tab-scroll-next {
     opacity: 1;
     pointer-events: auto;
 }

 /* Tab 导航栏 */
 .tab-header-container {
     display: flex;
     position: relative;
     /* 2026-08-23 更新点：左侧不再为滚动按钮预留固定空白，首个 Tab 与内容区对齐。 */
     padding: 0 36px 0 0;
     border-bottom: none;
     margin-bottom: 0;
     list-style: none;
     gap: 0;
     z-index: 1;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
 }

 .tab-header-container::-webkit-scrollbar {
     display: none;
 }

 .tab-header-container .tab-btn {
     background: transparent;
     border: none;
     padding: 12px 28px;
     font-size: 14px;
     font-weight: 500;
     color: #64748b;
     cursor: pointer;
     transition: none;
     position: relative;
     outline: none;
     white-space: nowrap;
     flex: 0 0 auto;
     z-index: 1;
 }

 /* 2026-08-23 更新点：桌面端首个 Tab 也与面板内容左边界对齐，避免 header padding 与按钮 padding 叠加。 */
 .tab-header-container > li:first-child > .tab-btn {
     padding-left: 0;
 }
 
 .tab-header-container .tab-btn:hover {
     color: #6366f1;
 }
 
 .tab-header-container .tab-btn.active {
     color: #6366f1;
     background-color: transparent;
     border-radius: 0;
 }
 
 .tab-header-container .tab-btn.active::before,
 .tab-header-container .tab-btn.active::after {
     display: none;
 }
 
 /* Tab indicator */
 .tab-indicator {
     position: absolute;
     bottom: 8px;
     height: 2px;
     width: 0;
     background-color: #6366f1;
     border-radius: 2px;
     transition: left 0.18s ease, width 0.18s ease;
     z-index: 2;
     pointer-events: none;
 }

 /* 2026-08-23 更新点：header 采用独立 segmented control，激活态使用整块背景，
    不再依赖容易受滚动和 padding 影响的下划线 indicator。 */
 .tab-header-scroll-wrapper {
     margin: 16px 0 8px;
     padding: 4px;
     background: #f1f5f9;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
 }
 .wt-tabbed-wrapper {
     margin: 0 0 16px;
     border-radius: 8px;
 }
 .tab-header-container {
     padding: 0 !important;
     gap: 2px;
 }
 .tab-header-container .tab-btn {
     min-height: 36px;
     padding: 8px 14px;
     border-radius: 6px;
     color: #475569;
     transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
 }
 .tab-header-container > li:first-child > .tab-btn {
     padding-left: 14px;
 }
 .tab-header-container .tab-btn.active {
     color: #0f172a;
     background: #fff;
     box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
 }
 .tab-header-container .tab-btn.active::before,
 .tab-header-container .tab-btn.active::after {
     display: none !important;
 }
 .tab-indicator {
     display: none !important;
 }
 .tab-header-scroll-wrapper {
     background: #f5f9ff;
     border-color: #bfd6f5;
     box-shadow: none;
 }
 .tab-header-scroll-wrapper::before {
     background: linear-gradient(to right, #f5f9ff 35%, rgba(245, 249, 255, 0));
 }
 .tab-header-scroll-wrapper::after {
     background: linear-gradient(to left, #f5f9ff 35%, rgba(245, 249, 255, 0));
 }
 .tab-header-container.tab-fit > li {
     flex: 1 1 0;
     min-width: 0;
 }
 .tab-header-container.tab-fit .tab-btn {
     width: 100%;
 }
 .tab-header-container.tab-overflow > li {
     flex: 0 0 auto;
 }
 .wt-tabbed-wrapper {
     background: transparent;
     border: 0;
     border-radius: 0;
     box-shadow: none;
     padding: 0;
 }
 .tab-header-container .tab-btn.active {
     color: #0d0d0d;
     border-radius: 999px;
     background: transparent;
     box-shadow: none;
 }
 /* 2026-08-23 更新点：增加选项内边距，并使用指定的浅蓝轨道 #F5F9FF。 */
 .tab-header-scroll-wrapper {
     overflow: visible;
     margin: 16px 0 8px;
     padding: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
 }
 .tab-header-scroll-wrapper::before,
 .tab-header-scroll-wrapper::after,
 .tab-scroll-btn {
     display: none !important;
 }
 .tab-header-container,
 .tab-header-container.tab-fit,
 .tab-header-container.tab-overflow {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     display: inline-flex;
     flex-wrap: nowrap;
     gap: 2px;
     width: max-content;
     max-width: 100%;
     height: 40px;
     margin: 0;
     padding: 4px !important;
     border: 0;
     border-radius: 999px;
     background: #f5f9ff;
     box-sizing: border-box;
     vertical-align: middle;
     white-space: nowrap;
     scrollbar-width: none;
 }
 .tab-header-container::-webkit-scrollbar {
     width: 0;
     height: 0;
 }
 .tab-header-container.tab-fit > li,
 .tab-header-container.tab-overflow > li,
 .tab-header-container > li {
     position: relative;
     z-index: 1;
     flex: 0 0 auto;
     display: flex;
     min-width: auto;
     height: 32px;
     margin: 0;
     padding: 0;
 }
 .tab-header-container .tab-btn,
 .tab-header-container.tab-fit .tab-btn,
 .tab-header-container > li:first-child > .tab-btn {
     position: relative;
     z-index: 1;
     width: auto;
     min-height: 32px;
     height: 32px;
     padding: 0 18px;
     border: 0;
     border-radius: 999px;
     background: transparent;
     box-shadow: none;
     color: #6483ad;
     font-size: 14px;
     font-weight: 500;
     line-height: 1;
     transition: color .15s ease;
 }
 .tab-header-container .tab-btn:hover {
     color: #2f67ad;
 }
 .tab-header-container .tab-btn:focus-visible {
     outline: 2px solid #2f67ad;
     outline-offset: -2px;
 }
 .tab-header-container .tab-btn.active {
     color: var(--wt-tab-accent, #2f67ad);
     font-weight: 500;
     border-radius: 999px;
     background: transparent;
     box-shadow: none;
 }
 .tab-indicator {
     position: absolute;
     z-index: 0;
     top: 4px;
     bottom: 4px;
     left: 0;
     display: block !important;
     height: auto;
     border-radius: 999px;
     background: #fff;
     box-shadow: 0 2px 6px -2px rgba(46, 85, 130, .28);
     pointer-events: none;
     will-change: transform, width;
     transition: transform .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1);
 }
 
 /* Tab 内容区域 */
 .tab-content-container {
     position: relative;
 }
 
 .tab-content-container > .tab-pane {
     display: none;
 }
 
 .tab-content-container > .tab-pane.active {
     display: block;
 }
 
 /* 内容列表样式 */
 /* 2026-08-31 更新点：修复 w-tabbed 嵌套列表标记，按直接父列表类型显示序号或项目符号。 */
 /* 2026-09-07 更新点：轮播指示器是 ol.carousel-indicators，属于组件控件而非正文列表，
    其 (0,1,0) 规则会被这里的 (0,2,0) 正文列表规则覆盖掉 margin-left:-30% 和 padding-left:0，
    导致 Tab 内指示器整条向右偏移。用零特异度的 :where() 排除它，既不匹配控件，
    也不改变本规则对正文列表的原有特异度，避免影响既有覆写。 */
 .tab-pane :is(.ol, ol):where(:not(.carousel-indicators)) {
     margin: 0;
     padding-left: 24px;
     color: #333;
     line-height: 1.8;
 }

 /* 2026-08-31 更新点：视频轮播占位符与原始比例媒体区域保持同尺寸，避免首帧加载时跳动。 */
 .wt_video_container.wt_in_carousel .wt_video_placeholder {
	 width: 100%;
	 height: 100% !important;
	 min-height: 0;
 }
 
 /* 2026-09-07 更新点：同上，排除指示器小圆点。正文 li 规则的 list-style-type:decimal 直接命中
    指示器 li，会盖掉 .carousel-indicators 继承来的 list-style:none 而显示出 1. 2. 3. 序号，
    margin-bottom 也会破坏圆点间距。 */
 .tab-pane :is(.ol, ol) > :is(.li, li):where(:not([data-bs-target])) {
     margin-bottom: 12px;
     list-style-type: decimal;
 }

 .tab-pane :is(.ul, ul) > :is(.li, li):where(:not([data-bs-target])) {
     margin-bottom: 12px;
     list-style-type: disc;
 }
 
 .tab-pane .p {
     margin: 0;
     line-height: 1.6;
 }
 
 /* ==========================================================================
    14. 底部导航样式
   ========================================================================== */
 /* 上一章/下一章导航 */
 .body_footer {
     text-align: center; 
     width: 100%;
     height: 62px;
     margin-top: 20px;
     padding-top: 16px;
     border-top: var(--border-normal);
     font-size: 12px;
     line-height: 18px;
 }
   
 .body_footer_left {
     display:inline-block;
     float:left;
     color: var(--font-color-body-footer);
     cursor: pointer;
 }
   
 .body_footer_left:before {
     content: "";
     display: inline-block;
     width: 12px;
     height: 12px;
     background-image: url("../images/prev-chapter@2x.png");
     background-size: 12px 12px;
     position: relative;
     top: 2px;
     margin-right: 4px;
     cursor: pointer;
 }
   
 .body_footer_right {
     display:inline-block;
     float:right;
     color: var(--font-color-body-footer);
     cursor: pointer;
 }
   
 .body_footer_right:after {
     content: "";
     display: inline-block;
     width: 12px;
     height: 12px;
     background-image: url("../images/next-chapter@2x.png");
     background-size: 12px 12px;
     position: relative;
     top: 2px;
     margin-left: 4px;
     cursor: pointer;
 }
   
 /* 2026-08-22 更新点：置顶/置底按钮共用尺寸和图标，默认隐藏并在达到滚动阈值后显示。 */
 .body_scroll_button,
 .body_to_top,
 .body_to_bottom {
     position: fixed;
     right: 20px;
     width: 44px;
     height: 44px;
     display: none;
     cursor: pointer;
     z-index: 10;
     border-radius: 50%;
     background-image: url("../images/backtop-noshadow@2x.png");
     background-size: 44px 44px;
     background-repeat: no-repeat;
 }

 /* 2026-08-31 更新点：置顶/置底按钮整体上移 48px，避开平台底部广告遮挡。 */
 .body_to_top {
     bottom: 184px;
 }

 .body_to_bottom {
     bottom: 132px;
     transform: rotate(180deg);
 }

 .body_scroll_button:hover,
 .body_to_top:hover,
 .body_to_bottom:hover{
     background-image: url("../images/backtop-noshadow@2x.png");
     background-size: 44px 44px;
 }

 .body_scroll_button:focus-visible,
 .body_to_top:focus-visible,
 .body_to_bottom:focus-visible{
     outline: 2px solid #1f6feb;
     outline-offset: 2px;
 }

 /* ==========================================================================
    15. 单页点赞样式
   ========================================================================== */

.topic_wpp {

}
.wt_topic_wpp_line {
	height: 0;
	border-top: 1px solid #F2F2F2;
	width: 60%;
	text-align: center;
	margin: 0 auto;
	position: relative;

}

.wt_topic_wpp_text {
	position: relative;
	top: -14px;
	background-color: #fff;
	display: inline-block;
	padding: 0 10px;
	margin: 0 auto;
	transform: none;
	left: auto;
	color: #6F7889;
}
.wt_topic_wpp_button {
	width: 100%;
	text-align: center;
	padding-top: 20px; 
	padding-bottom: 20px; 
	position: relative;
	left: -7px;
}

.wt_topic_wpp_like{
	display: inline-block;
	width: 30px;
	padding-left: 8px; 
	padding-right: 8px;
	margin-right: 4px;
}
.wt_topic_wpp_like:before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url("../images_m/unliked@2x.png");
	background-size: 20px 20px;
	position: relative;
	top: 4px;
	margin-right: 4px;
}
.wt_topic_wpp_notlike {
	display: inline-block;
	width: 30px;
	margin-left: 4px;
	padding-left: 8px; 
	padding-right: 8px;
	margin-right: 8px;
}
.wt_topic_wpp_notlike:before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url("../images_m/unliked@2x.png");
	transform: rotate(180deg);
	background-size: 20px 20px;
	position: relative;
	top: 4px;
	margin-right: 4px;
}

.wt_topic_wpp_like.kc-ding-up:before {
    background-image:url(../images_m/liked@2x.png) !important;
}
.wt_topic_wpp_notlike.kc-ding-down:before {
    background-image:url(../images_m/disliked@2x.png) !important;
}

.wt_topic_wpp_feedback {
	/* 2026-09-18 更新点：单页反馈按钮改为弹性宽度并居中对齐，避免文字贴近按钮边缘。 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 72px;
	margin-left: 0;
	padding: 6px 12px;
	color: #4094E7;
	border: 1px solid #4094E7;
	background-color: #F3F9FF;
	border-radius: 5px;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	white-space: nowrap;
}

/* .wt_topic_wpp_feedback:hover {
	background-color: #4094E7;
	color: #fff;
} */


 /* ========================================================================== 
   Card 与 card-center 支持 section 或 ul/ol 容器写法，并提供等高网格、图标及悬浮动效。
   card-icon-left/card-split/card-plain 使用独立 outputclass，不支持直接设置在 li 上。
    ========================================================================== */
 .body.conbody:has(> .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain)) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(max(240px, calc((100% - 48px) / 4)), 100%), 1fr));
     grid-auto-rows: auto;
     gap: 16px;
     align-items: stretch;
 }

 .body.conbody:has(> .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain)) > :not(.section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain)) {
     grid-column: 1 / -1;
 }

 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain),
 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li {
     display: flex;
     flex-direction: column;
     min-width: 0;
     height: 100%;
     border: 1px solid #E5E5E5;
     border-radius: 8px;
     background-color: var(--background-color-normal);
     transition: transform 160ms ease, border-color 160ms ease;
 }

 @media (hover: hover) and (pointer: fine) {
     .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain):hover,
     :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li:hover {
         border-color: #C9C9C9;
         transform: translateY(-2px);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain),
     :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li {
         transition: none;
     }

     .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain):hover,
     :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li:hover {
         transform: none;
     }
 }

 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain) {
     margin: 0;
     padding: 20px;
 }

 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .sectiontitle {
     margin: 0 0 8px;
     padding: 0;
     color: var(--font-color-section-title);
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
     cursor: default;
 }

 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > img.image,
 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li > img.image {
     display: block !important;
     order: -1;
     width: 28px !important;
     height: 28px !important;
     /* 普通 card 与 card-center 增大图标到标题的垂直间距。 */
     margin: 0 0 20px;
     object-fit: contain;
     cursor: default;
 }

 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > *:not(.sectiontitle) {
     margin-left: 0;
 }

 /* 无图标的普通 card/card-center 收紧正文行高和段间距，避免顶部内容显得松散。 */
 .section:is(.card, .card-center):not(:has(> img.image)) > :is(.p, .ul, .ol),
 :is(.ul, .ol):is(.card, .card-center) > .li:not(:has(> img.image)) > :is(.p, .ul, .ol) {
     margin-top: 4px;
     margin-bottom: 4px;
     line-height: 20px;
 }

 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > :last-child,
 .section:is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > :last-child > :last-child,
 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li > :last-child {
     margin-bottom: 0;
 }

 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(max(240px, calc((100% - 48px) / 4)), 100%), 1fr));
     grid-auto-rows: auto;
     gap: 16px;
     margin: 16px 0;
     padding: 0;
     list-style: none;
     align-items: stretch;

     /* 覆盖 Bootstrap 加载的 .card 组件默认边框/背景/圆角，避免容器层出现多余外框 */
     border: 0;
     background-color: transparent;
     border-radius: 0;
 }

 .body.conbody:has(> .section.card-icon-left),
 :is(.ul, .ol).card-icon-left {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 24px;
 }

 /* 2026-08-18 更新点：card-split 单卡占满整行；card-plain 桌面端每行最多两张。 */
 .body.conbody:has(> .section.card-plain),
 :is(.ul, .ol).card-plain {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .body.conbody:has(> .section.card-split) > .section.card-split {
     grid-column: 1 / -1;
 }

 :is(.ul, .ol).card-split {
     grid-template-columns: minmax(0, 1fr);
 }

 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > :not(.li) {
     grid-column: 1 / -1;
 }

 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li {
     align-items: flex-start;
     margin: 0 !important;
     padding: 20px;
     list-style: none;
 }

 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li > .ph:first-of-type {
     display: block;
     margin: 0 0 8px;
     color: var(--font-color-section-title);
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
 }

 :is(.ul, .ol):is(.card, .card-center, .card-icon-left, .card-split, .card-plain) > .li > .p {
     width: 100%;
 }

 /* outputclass="card-center" 将 section 或 ul/ol 卡片内容居中，并仅在悬浮时显示边框。 */
 .section.card-center,
 :is(.ul, .ol).card-center > .li {
     align-items: center;
     border-color: transparent;
     text-align: center;
 }

 .section.card-center > img.image,
 :is(.ul, .ol).card-center > .li > img.image {
     align-self: center;
 }

 @media (hover: hover) and (pointer: fine) {
     .section.card-center:hover,
     :is(.ul, .ol).card-center > .li:hover {
         border-color: #E5E5E5;
     }
 }

 /* 独立 outputclass="card-split" 生成左内容、右媒体的单卡布局。 */
 :is(.section.card-split, .ul.card-split > .li, .ol.card-split > .li) {
     display: grid;
     grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
     gap: 24px;
     align-items: center;
     min-height: 280px;
     padding: 20px 32px;
     border: 0;
     border-radius: 16px;
     background-color: #F7F8F9;
     transform: none;
 }

 @media (hover: hover) and (pointer: fine) {
     :is(.section.card-split, .ul.card-split > .li, .ol.card-split > .li):hover {
         border-color: transparent;
         transform: none;
     }
 }

 .wt_card_split_content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     min-width: 0;
     gap: 12px;
 }

 .wt_card_split_content > :is(.sectiontitle, .ph:first-child) {
     display: block;
     margin: 0;
     padding: 0;
     color: var(--font-color-section-title);
     font-size: 18px;
     font-weight: 600;
     line-height: 28px;
 }

 .wt_card_split_content > :not(.sectiontitle):not(.ph):not(.wt_card_actions) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     color: var(--font-color-topic-content);
     font-size: 14px;
     line-height: 20px;
 }

 .wt_card_split_media {
     display: flex;
     align-items: center;
     justify-content: center;
     align-self: stretch;
     min-width: 0;
     min-height: 240px;
     overflow: hidden;
     border-radius: 12px;
     background-color: #F7F8F9;
 }

 /* 2026-08-31 更新点：card-split 右侧媒体支持 .fig 与原生 <fig>，标题/说明可选。 */
 .wt_card_split_media > :is(img.image, video, .fig, fig) {
     display: block !important;
     box-sizing: border-box;
     width: 100% !important;
     height: 100% !important;
     max-height: 360px;
     margin: 0;
     object-fit: contain;
 }

 .wt_card_split_media > :is(.fig, fig) {
     display: flex !important;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
     background-color: transparent;
 }

 .wt_card_split_media > :is(.fig, fig) > img.image {
     display: block !important;
     box-sizing: border-box;
     width: 100% !important;
     height: auto !important;
     flex: 1 1 auto;
     min-height: 0;
     max-height: 360px;
     margin: 0;
     object-fit: contain;
 }

 .wt_card_split_media > .wt_video_container {
     width: 100%;
     max-width: none;
     height: 100%;
     margin: 0;
     border: 0;
     border-radius: 0;
     background-color: transparent;
     box-shadow: none;
 }

 .wt_card_split_media > .wt_video_container video {
     width: 100% !important;
     height: 100% !important;
     margin: 0;
     object-fit: contain;
 }

/* Fullscreen video should remain edge-to-edge without page-level decoration. */
.wt_video_container:fullscreen {
   border: 0;
   border-radius: 0;
   box-shadow: none;
   background: #000;
}

.wt_video_container:-webkit-full-screen {
   border: 0;
   border-radius: 0;
   box-shadow: none;
   background: #000;
}

.wt_video_container:-moz-full-screen {
   border: 0;
   border-radius: 0;
   box-shadow: none;
   background: #000;
}

 :is(.section.card-split, .ul.card-split > .li, .ol.card-split > .li).wt_card_split_no_media {
     grid-template-columns: minmax(0, 1fr);
     /* 2026-08-18 更新点：无媒体 Split Card 保持整行宽度，高度改由实际内容自然撑开。 */
     align-self: start;
     min-height: 0;
     height: 100%;
 }

 /* 独立 outputclass="card-plain" 生成无图三行卡片。 */
 /* 2026-10-13 更新点：card-plain/card-split 初始化完成前隐藏卡片，避免加载时闪现 DITA 原始扁平样式；
    1.5s 兜底动画保证 JS 异常/未执行时卡片最终仍可见。 */
 .section:not(.wt_card_layout_initialized):is(.card-plain, .card-split),
 :is(.ul, .ol):is(.card-plain, .card-split) > .li:not(.wt_card_layout_initialized) {
     visibility: hidden;
     animation: wt_card_layout_fallback 0s 1.5s forwards;
 }

 @keyframes wt_card_layout_fallback {
     to { visibility: visible; }
 }

 :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li) {
     display: grid;
     grid-template-rows: auto auto auto;
     align-items: start;
     min-width: 0;
     height: 100%;
     padding: 20px;
     border: 1px solid #E5E5E5;
     border-radius: 8px;
     background-color: var(--background-color-normal);
     transform: none;
 }

 @media (hover: hover) and (pointer: fine) {
     :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li):hover {
         border-color: #E5E5E5;
         transform: none;
     }
 }

 :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li) > :is(.sectiontitle, .ph:first-child) {
     display: block;
     margin: 0;
     padding: 0;
     color: var(--font-color-section-title);
     font-size: 18px;
     font-weight: 600;
     line-height: 25px;
 }

 .wt_card_plain_body {
     min-width: 0;
     margin-top: 8px;
     color: var(--font-color-topic-content);
     /* 2026-10-13 更新点：card-plain 正文字号统一为 14px，与 card-split/card-icon-left 及全局基准一致。 */
     font-size: 14px;
     line-height: 20px;
 }

 .wt_card_plain_body > :first-child {
     margin-top: 0 !important;
 }

 .wt_card_plain_body > :last-child {
     margin-bottom: 0 !important;
 }

 /* card-actions 每个 ph 包含一个 xref；Split 使用主次按钮，Plain 使用带箭头的文本操作链接。 */
 .wt_card_actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
     min-width: 0;
 }

 .wt_card_split_content > .wt_card_actions {
     padding-top: 4px;
 }

 :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li) > .wt_card_actions {
     align-self: end;
     column-gap: 20px;
     row-gap: 12px;
     margin-top: 20px;
 }

 .wt_card_actions > .ph.card-actions {
     display: block;
     margin: 0;
 }

 .wt_card_split_content > .wt_card_actions > .ph.card-actions > a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     min-height: 40px;
     padding: 9px 16px;
     border: 1px solid #C9C9C9;
     border-radius: 999px;
     color: var(--font-color-section-title);
     background-color: transparent;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     text-decoration: none;
     transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
 }

 /* 2026-09-28 更新点：主按钮颜色支持 card-split 色值类动态自定义（JS 写入 --wt-card-primary-btn 变量），默认黑色 #181818。 */
 .wt_card_split_content > .wt_card_actions > .ph.card-actions:first-child > a {
     border-color: var(--wt-card-primary-btn, #181818);
     color: #FFFFFF;
     background-color: var(--wt-card-primary-btn, #181818);
 }

 @media (hover: hover) and (pointer: fine) {
     .wt_card_split_content > .wt_card_actions > .ph.card-actions > a:hover {
         border-color: #9CA3AF;
         background-color: #F8F9FB;
         text-decoration: none;
     }

     .wt_card_split_content > .wt_card_actions > .ph.card-actions:first-child > a:hover {
         border-color: var(--wt-card-primary-btn-hover, var(--wt-card-primary-btn, #000000));
         color: #FFFFFF;
         background-color: var(--wt-card-primary-btn-hover, var(--wt-card-primary-btn, #000000));
     }
 }

 
 :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li) > .wt_card_actions > .ph.card-actions > a {
     display: inline-flex;
     align-items: center;
     align-self: flex-start;
     gap: 4px;
     padding: 0;
     border: 0;
     border-radius: 0;
     color: var(--font-color-section-title);
     background-color: transparent;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     text-decoration: none;
     transition: color 160ms ease;
 }

 :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li) > .wt_card_actions > .ph.card-actions > a::after {
     content: "";
     display: block;
     flex: 0 0 16px;
     width: 16px;
     height: 16px;
     background-color: currentColor;
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z'/%3E%3C/svg%3E") center / contain no-repeat;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'%3E%3Cpath d='M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z'/%3E%3C/svg%3E") center / contain no-repeat;
 }

 @media (hover: hover) and (pointer: fine) {
     :is(.section.card-plain, .ul.card-plain > .li, .ol.card-plain > .li) > .wt_card_actions > .ph.card-actions > a:hover {
         color: var(--font-color-topic-content);
         background-color: transparent;
         text-decoration: none;
     }
 }

 .wt_card_actions > .ph.card-actions > a:focus-visible {
     outline: 2px solid rgba(46, 133, 232, 0.32);
     outline-offset: 2px;
 }

 /* 独立 outputclass="card-icon-left" 将图标置左、标题和正文置右。 */
 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) {
     display: grid;
     grid-template-columns: 48px minmax(0, 1fr);
     column-gap: 16px;
     row-gap: 0;
     align-content: start;
     align-items: start;
     padding: 0;
     border: 0;
     text-align: left;
 }

 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > img.image {
     grid-column: 1;
     grid-row: 1;
     order: 0;
     box-sizing: border-box;
     width: 48px !important;
     height: 48px !important;
     margin: 0;
     padding: 9px;
     border: 1px solid #E5E5E5;
     border-radius: 8px;
     background-color: transparent;
     transition: border-color 160ms ease;
 }

 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right {
     grid-column: 2;
     grid-row: 1;
     min-width: 0;
 }

 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right > :is(.sectiontitle, .ph:first-of-type) {
     display: block;
     margin: 0;
     color: var(--font-color-section-title);
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
 }

 /* card-icon-left 的 sectiontitle/ph 标题链接复用 Timeline 的原色、无下划线和行尾 pointer 提示。 */
 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right > :is(.sectiontitle, .ph:first-of-type) a {
     color: inherit;
     text-decoration: none;
 }

 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right > :is(.sectiontitle, .ph:first-of-type) a::after {
     content: "";
     display: inline-block;
     width: 20px;
     height: 20px;
     margin-left: 4px;
     background-color: currentColor;
     vertical-align: -4px;
     opacity: 0;
     transform: translateX(-4px);
     transition: opacity 160ms ease, transform 160ms ease;
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
 }

 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li):hover > .wt_card_icon_right > :is(.sectiontitle, .ph:first-of-type) a::after,
 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right > :is(.sectiontitle, .ph:first-of-type) a:focus-visible::after {
     opacity: 1;
     transform: translateX(0);
 }

 :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right > :is(.p, .ul, .ol):not(.card) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     font-size: 14px;
     line-height: 20px;
 }

 @media (hover: hover) and (pointer: fine) {
     :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li):hover > img.image {
         border-color: #C9C9C9;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > img.image {
         transition: none;
     }

     :is(.section.card-icon-left, .ul.card-icon-left > .li, .ol.card-icon-left > .li) > .wt_card_icon_right > :is(.sectiontitle, .ph:first-of-type) a::after {
         transition: none;
     }
 }

 /* 2026-08-18 更新点：Card 链接继承标题/正文颜色并取消下划线；唯一入口链接支持整卡跳转和右上角箭头。 */
 .section:is(.card, .card-center),
 :is(.ul, .ol):is(.card, .card-center) > .li {
     position: relative;
 }

 .section:is(.card, .card-center) a,
 :is(.ul, .ol):is(.card, .card-center) > .li a {
     color: inherit;
     text-decoration: none;
 }

 /* 2026-08-18 更新点：Section/Li Card 正文为嵌套列表时，列表项链接悬浮或聚焦后变色并保持无下划线。 */
 :is(.section.card, .section.card-center, .ul.card > .li, .ol.card > .li, .ul.card-center > .li, .ol.card-center > .li) :is(.ul, .ol) > .li a {
     color: inherit;
     text-decoration: none;
     transition: color 160ms ease;
 }

 :is(.section.card, .section.card-center, .ul.card > .li, .ol.card > .li, .ul.card-center > .li, .ol.card-center > .li) :is(.ul, .ol) > .li a:hover,
 :is(.section.card, .section.card-center, .ul.card > .li, .ol.card > .li, .ul.card-center > .li, .ol.card-center > .li) :is(.ul, .ol) > .li a:focus-visible {
     color: var(--font-color-link-web);
     text-decoration: none;
 }

 :is(.section.card, .section.card-center, .ul.card > .li, .ol.card > .li, .ul.card-center > .li, .ol.card-center > .li) :is(.ul, .ol) > .li a:focus-visible {
     border-radius: 2px;
     outline: 2px solid rgba(46, 133, 232, 0.28);
     outline-offset: 2px;
 }

 .section:is(.card, .card-center).wt_card_linked,
 :is(.ul, .ol):is(.card, .card-center) > .li.wt_card_linked {
     padding-right: 48px;
     cursor: pointer;
 }

 .wt_card_link_icon {
     position: absolute;
     top: 12px;
     right: 12px;
     display: flex;
     width: 20px;
     height: 20px;
     color: var(--font-color-section-title3);
     opacity: 0;
     pointer-events: none;
     transform: translate(4px, 4px);
     transition: opacity 160ms ease, transform 160ms ease;
 }

 .wt_card_link_icon > svg {
     display: block;
     width: 20px;
     height: 20px;
 }

 @media (hover: hover) and (pointer: fine) {
     .section:is(.card, .card-center).wt_card_linked:hover > .wt_card_link_icon,
     :is(.ul, .ol):is(.card, .card-center) > .li.wt_card_linked:hover > .wt_card_link_icon {
         opacity: 1;
         transform: translate(0, 0);
     }
 }

 .section:is(.card, .card-center).wt_card_linked:focus-visible > .wt_card_link_icon,
 :is(.ul, .ol):is(.card, .card-center) > .li.wt_card_linked:focus-visible > .wt_card_link_icon {
     opacity: 1;
     transform: translate(0, 0);
 }

 .section:is(.card, .card-center) > .wt_card_entry_source {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
     border: 0;
 }

 @media (prefers-reduced-motion: reduce) {
     .wt_card_link_icon,
     :is(.section.card, .section.card-center, .ul.card > .li, .ol.card > .li, .ul.card-center > .li, .ol.card-center > .li) :is(.ul, .ol) > .li a {
         transition: none;
     }
 }
   
 /* ==========================================================================
   outputclass="card-text" 无图文字卡片：正文 xref 始终显示主题链接蓝色
  （无需悬浮变色），每行最多 4 张；卡片数不满时——1 张靠左、2-3 张居中。
  仅纯 CSS 实现，不复用 initCardLinks 的整卡跳转与右侧箭头。
  支持 section 或 ul/ol 容器写法，移动端恒为单列（见 wt_topic_m.css）。
   ========================================================================== */

 /* 容器：直接子卡片 flex 换行，每行最多 4 张（基宽按 4 列均分）。 */
 .body.conbody:has(> .section.card-text),
 :is(.ul, .ol).card-text {
     display: flex;
     flex-wrap: wrap;
     row-gap: 20px;
     column-gap: 16px;
     /* 4 列均分：扣除 3 个列间 gap（16px × 3 = 48px） */
     --wt-card-text-col: calc((100% - 48px) / 4);
     justify-content: flex-start; /* 默认：1 张靠左 */
     align-items: stretch;
     margin: 16px 0;
     padding: 0;
     list-style: none;
 }

 .body.conbody:has(> .section.card-text) > :not(.section.card-text) {
     flex: 1 1 100%;
     min-width: 0;
     margin-left: 0;
     margin-right: 0;
 }

 .body.conbody:has(> .section.card-text) > .section.card-text,
 :is(.ul, .ol).card-text > .li {
     flex: 0 1 var(--wt-card-text-col);
     min-width: 240px; /* 窄屏时收缩换行，避免缩成一个点 */
     box-sizing: border-box;
 }

 /* 恰好 2 张且一行放得下 → 居中 */
 .body.conbody:has(> .section.card-text:nth-child(2)):not(:has(> .section.card-text:nth-child(3))),
 :is(.ul, .ol).card-text:has(> .li:nth-child(2)):not(:has(> .li:nth-child(3))) {
     justify-content: center;
 }

 /* 恰好 3 张且一行放得下 → 居中 */
 .body.conbody:has(> .section.card-text:nth-child(3)):not(:has(> .section.card-text:nth-child(4))),
 :is(.ul, .ol).card-text:has(> .li:nth-child(3)):not(:has(> .li:nth-child(4))) {
     justify-content: center;
 }

 /* 卡片本体：无图、白底、细边框圆角。 */
 .section.card-text,
 :is(.ul, .ol).card-text > .li {
     display: flex;
     flex-direction: column;
     min-width: 0;
     height: auto;
     margin: 0;
     padding: 20px;
     border: 1px solid #E5E5E5;
     border-radius: 8px;
     background-color: var(--background-color-normal);
     box-sizing: border-box;
 }

 /* 标题：取 section .sectiontitle 或 li 内首个 .ph 链接，作为卡片主文字。 */
 .section.card-text > .sectiontitle,
 :is(.ul, .ol).card-text > .li > .ph:first-of-type {
     display: block;
     margin: 0 0 8px;
     padding: 0;
     color: var(--font-color-section-title);
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
 }

 /* 复位通用 .section 规则的漏网：.section > *:not(.sectiontitle) 会给卡片里的正文
    加上 margin-left，此处归零，保证 section 卡与 ul/ol 卡内边距一致。 */
 .section.card-text > *:not(.sectiontitle) {
     margin-left: 0;
 }

 /* section 卡标题不参与章节折叠，隐藏可能插入的展开/收起按钮。 */
 .section.card-text > .sectiontitle > .wh_expand_btn {
     display: none;
 }

 /* 卡片内正文（描述段）颜色与行距。 */
 .section.card-text > :is(.p, .ul, .ol):not(.card-text),
 :is(.ul, .ol).card-text > .li > :is(.p, .ul, .ol):not(.card-text) {
     margin-top: 4px;
     margin-bottom: 4px;
     line-height: 20px;
     color: var(--font-color-topic-content);
 }

 /* 卡片悬浮：背景色平铺变化（仅颜色，无上浮动效）。 */
 .section.card-text,
 :is(.ul, .ol).card-text > .li {
     transition: background-color 160ms ease;
 }

 .section.card-text:hover,
 :is(.ul, .ol).card-text > .li:hover {
     background-color: #F9F9F9;
 }

 /* 标题链接：取 section .sectiontitle 或 li 内首个 .ph 链接，默认深色（不继承蓝），
   悬浮时标题右侧淡入一个旋转边框合成的小右箭头（›）。 */
 .section.card-text > .sectiontitle a.xref,
 :is(.ul, .ol).card-text > .li > .ph:first-of-type > a.xref {
     position: relative;
     color: inherit;              /* 默认深色 */
     text-decoration: none;
 }

 /* 箭头：旋转 45° 的 top+right 边框合成的小右箭头 "›"，跟随标题字色。 */
 .section.card-text > .sectiontitle a.xref::after,
 :is(.ul, .ol).card-text > .li > .ph:first-of-type > a.xref::after {
     content: "";
     display: inline-block;
     box-sizing: border-box;
     width: 8px;
     height: 8px;
     margin-left: 6px;
     vertical-align: 1px;
     border: 0;
     border-top: 2px solid currentColor;
     border-right: 2px solid currentColor;
     opacity: 0;
     transform: translateX(-4px) rotate(45deg);
     transition: opacity 160ms ease, transform 160ms ease;
 }

 /* 悬浮/聚焦标题或其所在卡片时，淡入箭头并滑动到右端，制造指针效果。 */
 .section.card-text:hover > .sectiontitle a.xref::after,
 .section.card-text > .sectiontitle a.xref:hover::after,
 .section.card-text > .sectiontitle a.xref:focus-visible::after,
 :is(.ul, .ol).card-text > .li:hover > .ph:first-of-type > a.xref::after,
 :is(.ul, .ol).card-text > .li > .ph:first-of-type > a.xref:hover::after,
 :is(.ul, .ol).card-text > .li > .ph:first-of-type > a.xref:focus-visible::after {
     opacity: 1;
     transform: translateX(0) rotate(45deg);
 }

 /* 正文里的文字若加了链接（xref），始终显示主题链接蓝色；悬浮下划线。 */
 .section.card-text > *:not(.sectiontitle) a.xref,
 :is(.ul, .ol).card-text > .li > *:not(.ph:first-of-type) a.xref {
     color: var(--font-color-link-web); /* #2E85E8 */
     text-decoration: none;
 }

 .section.card-text > *:not(.sectiontitle) a.xref:hover,
 .section.card-text > *:not(.sectiontitle) a.xref:focus,
 :is(.ul, .ol).card-text > .li > *:not(.ph:first-of-type) a.xref:hover,
 :is(.ul, .ol).card-text > .li > *:not(.ph:first-of-type) a.xref:focus {
     text-decoration: underline;
 }

 @media (prefers-reduced-motion: reduce) {
     .section.card-text,
     :is(.ul, .ol).card-text > .li,
     .section.card-text > .sectiontitle a.xref::after,
     :is(.ul, .ol).card-text > .li > .ph:first-of-type > a.xref::after {
         transition: none;
     }
 }

 /* 移除 Bootstrap 对 .card 容器类默认边框/背景，避免容器层出现多余外框。 */
 .body.conbody:has(> .section.card-text),
 :is(.ul, .ol).card-text {
     border: 0;
     background-color: transparent;
 }

 /* 反馈按钮
 .body_feedback {
     position: fixed;
     bottom: 76px;
     right:20px;
     width: 44px;
     height: 44px;
     cursor: pointer;
     z-index: 10;
     border-radius: 22px 22px 22px 22px;
     background-image: url("../images/feedback-noshadow@2x.png");
     background-size: 44px 44px;
 }
   
 .body_feedback:hover {
     background-image: url("../images/feedback-noshadow@2x.png");
     background-size: 44px 44px;
 } */

/* 2026-08-23 更新点：Tab 最终视觉状态统一使用浅蓝轨道的深色系文字，
   并让窄桌面与移动端都按真实横向溢出显示方向提示。 */
/* 2026-09-28 更新点：Tab 激活色支持 tab 色值类动态自定义（JS 写入 --wt-tab-accent 变量）。
   区分两种变体：tab（.tab-scroll-wrapper）默认 --background-color-primary-button，
   wt-tabbed 默认深蓝 #245f9f；移动端与桌面端保持一致。 */
.tab-header-container .tab-btn:not(.active) {
    color: #5276a6 !important;
    font-weight: 500;
}

.tab-header-container .tab-btn.active {
    color: var(--wt-tab-accent, #245f9f) !important;
    font-weight: 600;
}

.tab-header-scroll-wrapper.can-scroll-left::before,
.tab-header-scroll-wrapper.can-scroll-right::after {
    display: block !important;
    top: 0;
    bottom: 0;
    width: 38px;
    opacity: 1;
    border-radius: 999px;
}

.tab-header-scroll-wrapper.can-scroll-left::before {
    background: linear-gradient(to right, #f5f9ff 45%, rgba(245, 249, 255, 0));
}

.tab-header-scroll-wrapper.can-scroll-right::after {
    background: linear-gradient(to left, #f5f9ff 45%, rgba(245, 249, 255, 0));
}

.tab-header-scroll-wrapper.can-scroll-left .tab-scroll-prev,
.tab-header-scroll-wrapper.can-scroll-right .tab-scroll-next {
    display: flex !important;
    width: 24px;
    height: 24px;
    opacity: .78;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
}

.tab-header-scroll-wrapper.can-scroll-left .tab-scroll-prev {
    left: 5px;
}

.tab-header-scroll-wrapper.can-scroll-right .tab-scroll-next {
    right: 5px;
}

.tab-header-scroll-wrapper .tab-scroll-btn::before {
    width: 12px;
    height: 12px;
    background-color: #5276a6;
}

/* 2026-08-23 更新点：兼容已生成或缓存的 Tab DOM，强制隐藏其中残留的固定表头副本。 */
.tab-pane .wt_table_rowfixed {
    display: none !important;
}

/* 2026-09-11 更新点：新增独立 outputclass="tab" 样式，区别于 wt-tabbed。 */
.tab-box {
    width: 100%;
    margin: 20px 0 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}
.tab-scroll-wrapper { position: relative; width: 100%; margin: 0; border: 0; border-bottom: 1px solid #e5e7eb; background: #fff; overflow: visible; }
.tab-scroll-wrapper .tab-header-container,
.tab-scroll-wrapper .tab-header-container.tab-fit,
.tab-scroll-wrapper .tab-header-container.tab-overflow {
    display: flex; width: 100%; max-width: none; height: 44px; margin: 0; padding: 0 40px 0 0 !important;
    gap: 0; border: 0; border-radius: 0; background: transparent; overflow-x: auto; overflow-y: hidden;
    box-sizing: border-box; scrollbar-width: none;
}
.tab-scroll-wrapper .tab-header-container::-webkit-scrollbar { display: none; }
.tab-scroll-wrapper .tab-header-container > li,
.tab-scroll-wrapper .tab-header-container.tab-fit > li,
.tab-scroll-wrapper .tab-header-container.tab-overflow > li { display: flex; flex: 0 0 auto; height: 44px; margin: 0; padding: 0; }
.tab-scroll-wrapper .tab-header-container .tab-btn,
.tab-scroll-wrapper .tab-header-container.tab-fit .tab-btn,
.tab-scroll-wrapper .tab-header-container > li:first-child > .tab-btn {
    width: auto; min-width: 0; min-height: 44px; height: 44px; padding: 0 20px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; color: #1f2937 !important; font-size: 14px; font-weight: 400;
    line-height: 22px; white-space: nowrap; transition: color 160ms ease;
}
.tab-scroll-wrapper .tab-header-container > li:first-child > .tab-btn { padding-left: 0; }
.tab-scroll-wrapper .tab-header-container .tab-btn:hover,
.tab-scroll-wrapper .tab-header-container .tab-btn:focus-visible { color: var(--wt-tab-accent, var(--background-color-primary-button)) !important; }
.tab-scroll-wrapper .tab-header-container .tab-btn:focus-visible { outline: 2px solid var(--wt-tab-accent, var(--background-color-primary-button)); outline-offset: -2px; }
.tab-scroll-wrapper .tab-header-container .tab-btn.active { color: var(--wt-tab-accent, var(--background-color-primary-button)) !important; font-weight: 500; background: transparent; box-shadow: none; }
.tab-scroll-wrapper .tab-header-container .tab-btn.active::before,
.tab-scroll-wrapper .tab-header-container .tab-btn.active::after { display: none !important; }
.tab-scroll-wrapper .tab-indicator { top: auto; bottom: -1px; height: 3px; border-radius: 0; background: var(--wt-tab-accent, var(--background-color-primary-button)); box-shadow: none; display: block !important; z-index: 2; transition: transform 180ms ease, width 180ms ease; }
.tab-wrapper { width: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.tab-wrapper .tab-content-container { width: 100%; padding: 20px 24px 24px; border: 0; border-radius: 0; background: #fff; box-sizing: border-box; }
.tab-wrapper .tab-content-container > .tab-pane { display: none; }
.tab-wrapper .tab-content-container > .tab-pane.active { display: block; }
.tab-scroll-wrapper::before, .tab-scroll-wrapper::after { top: 0; bottom: 0; width: 44px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.tab-scroll-wrapper::before { left: 0; background: linear-gradient(to right, #fff 20%, rgba(255,255,255,0)); }
.tab-scroll-wrapper::after { right: 0; background: linear-gradient(to left, #fff 20%, rgba(255,255,255,0)); }
.tab-scroll-wrapper.can-scroll-left::before, .tab-scroll-wrapper.can-scroll-right::after { opacity: 1; }
.tab-scroll-wrapper .tab-scroll-btn { display: flex; width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.10); opacity: 0; pointer-events: none; z-index: 3; }
.tab-scroll-wrapper.can-scroll-left .tab-scroll-prev, .tab-scroll-wrapper.can-scroll-right .tab-scroll-next { opacity: 1; pointer-events: auto; }
.tab-scroll-wrapper .tab-scroll-prev { left: 6px; }
.tab-scroll-wrapper .tab-scroll-next { right: 6px; }
.tab-scroll-wrapper .tab-scroll-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.tab-scroll-wrapper .tab-scroll-btn::before { width: 12px; height: 12px; background-color: var(--background-color-primary-button); }
@media (prefers-reduced-motion: reduce) {
    .tab-scroll-wrapper .tab-header-container .tab-btn, .tab-scroll-wrapper .tab-indicator,
    .tab-scroll-wrapper::before, .tab-scroll-wrapper::after { transition: none; }
}

/* 2026-09-13: Apple-style outputclass="image-tab-right" media gallery. */
.image-tab-right.wt_image_tab_right_source {
    display: none !important;
}

.wt-image-tab-right {
    display: grid;
    grid-template-columns: fit-content(340px) minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 32px);
    row-gap: 0;
    width: min(100%, 1260px);
    margin: 64px auto;
    padding: 28px;
    box-sizing: border-box;
    position: relative;
    border-radius: 32px;
    background: #fafafc;
}

.wt-image-tab-right-controls-shell {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.wt-image-tab-right.wt-image-tab-right-has-supplement .wt-image-tab-right-controls-shell {
    grid-row: 1 / span 2;
}

.wt-image-tab-right-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    position: relative;
    visibility: visible;
    opacity: 1;
}

.wt-image-tab-right-item {
    position: relative;
    width: 340px;
    min-width: 128px;
    max-width: 340px;
    align-self: flex-start;
    overflow: hidden;
    border-radius: 28px;
    background: rgb(232 232 237 / 72%);
    box-shadow: inset 0 0 .5px 0 rgb(0 0 0 / 11%);
    backdrop-filter: blur(20px);
}

.wt-image-tab-right-item + .wt-image-tab-right-item {
    margin-top: 12px;
}

.wt-image-tab-right-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 0 32px;
    padding-block: 12px;
    padding-inline-start: 14px;
    padding-inline-end: 32px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: #1d1d1f;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: opacity 400ms ease, height 360ms ease, min-height 360ms ease, padding 360ms ease;
}

.wt-image-tab-right-trigger:hover,
.wt-image-tab-right-trigger:focus-visible {
    background: rgb(232 232 237 / 92%);
}

.wt-image-tab-right-trigger:focus-visible,
.wt-image-tab-right-close:focus-visible {
    outline: 2px solid var(--background-color-primary-button, #0071e3);
    outline-offset: 3px;
}

.wt-image-tab-right-item.is-active .wt-image-tab-right-trigger {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.wt-image-tab-right .control-item-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: #1d1d1f;
    font-size: 17px;
    line-height: 1.2353641176;
    font-weight: 600;
    white-space: normal;
}

.wt-image-tab-right .control-item-label > span:last-child {
    min-width: 0;
}

.wt-image-tab-right .control-item-label .plus-icon {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-end: 14px;
}

.wt-image-tab-right .control-item-label .plus-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    color: #1d1d1f;
}

.wt-image-tab-right .control-item-label .plus-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.wt-image-tab-right .control-item-label .plus-icon path { fill: currentColor; }

.wt-image-tab-right-content-mask {
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(24px);
    transition: max-height 420ms ease, opacity 420ms ease 250ms, transform 400ms ease;
}

.wt-image-tab-right-content-mask.is-open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.wt-image-tab-right-content-inner {
    position: static;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(100%, 423px);
    min-height: 0;
    padding: 28px 76px 28px 28px;
    color: #1d1d1f;
    font-size: 17px;
    line-height: 1.4705882353;
}

.wt-image-tab-right-content-inner > :first-child {
    margin-top: 0;
}

.wt-image-tab-right-content-inner > :last-child:not(.wt-image-tab-right-close) {
    margin-bottom: 0;
}

.wt-image-tab-right-content-inner p,
.wt-image-tab-right-content-inner .p {
    margin: 0;
}

.wt-image-tab-right-copy {
    padding: 0;
    color: #1d1d1f;
    font-size: 17px;
    line-height: 1.4705882353;
}

.wt-image-tab-right-copy-title {
    font-weight: 600;
}

.wt-image-tab-right-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(232 232 237 / 72%);
    color: #1d1d1f;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 0 .5px 0 rgb(0 0 0 / 11%);
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.wt-image-tab-right-close:hover {
    background: rgb(232 232 237 / 92%);
    color: #1d1d1f;
    transform: scale(1.05);
}

.wt-image-tab-right-close .close-icon,
.wt-image-tab-right-close .close-icon svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.wt-image-tab-right-close .close-icon svg { fill: currentColor; }

.wt-image-tab-right-media-stage {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f7;
    border-radius: 28px;
    z-index: 0;
}

.wt-image-tab-supplement-stage[hidden],
.wt-image-tab-supplement-stage:empty,
.wt-image-tab-supplement-item[hidden] {
    display: none !important;
}

.wt-image-tab-supplement-item {
    box-sizing: border-box;
    width: 100%;
    max-height: clamp(180px, 38vh, 360px);
    padding: 4px 10px 4px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    text-align: left;
}

.wt-image-tab-supplement-item > :first-child {
    margin-top: 0;
}

.wt-image-tab-supplement-item > :last-child {
    margin-bottom: 0;
}

.wt-image-tab-right-supplement-stage {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 16px;
}

.wt-image-tab-right-media-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.wt-image-tab-right-media-item.is-active {
    opacity: 1;
    visibility: visible;
    display: flex;
    transition-delay: 0s;
}

.wt-image-tab-right.wt-image-tab-carousel-active .wt-image-tab-right-media-stage {
    height: var(--wt-image-tab-right-media-height, clamp(240px, 52vw, 720px));
    min-height: 220px;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
}

.wt-image-tab-right-media-item.wt-image-tab-carousel-media,
.wt-image-tab-top-media-item.wt-image-tab-carousel-media {
    align-items: flex-start;
    overflow: visible;
}

.wt-image-tab-right-media-item > .wt_fig_carousel_layout,
.wt-image-tab-top-media-item > .wt_fig_carousel_layout {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Image Tab already constrains the outer media width, so a nested non-gallery
   carousel must not apply the standalone carousel's additional 80% shrink. */
.wt-image-tab-right-media-item .wt_fig_carousel_layout > .fig.carousel.slide:not(.gallery),
.wt-image-tab-top-media-item .wt_fig_carousel_layout > .fig.carousel.slide:not(.gallery),
.wt-image-tab-right-media-item .wt_fig_carousel_layout:has(> .fig.carousel.slide:not(.gallery)) > .wt_fig_carousel_text_content,
.wt-image-tab-top-media-item .wt_fig_carousel_layout:has(> .fig.carousel.slide:not(.gallery)) > .wt_fig_carousel_text_content {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.wt-image-tab-right-media-item > .fig,
.wt-image-tab-right-media-item > fig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.wt-image-tab-right-media-item > img.image,
.wt-image-tab-right-media-item .fig > img.image,
.wt-image-tab-right-media-item fig > img.image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0;
    object-fit: contain;
}

.wt-image-tab-right-media-item .fig_caption,
.wt-image-tab-right-media-item figcaption {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .wt-image-tab-right-trigger,
    .wt-image-tab-right-content-mask,
    .wt-image-tab-right-close,
    .wt-image-tab-right-media-item,
    .wt-image-tab-right-controls-shell::before,
    .wt-image-tab-right-controls-shell::after {
        transition: none;
        animation: none;
    }
}

/* 2026-09-13: Apple fade-gallery style for outputclass="image-tab-top". */
.image-tab-top.wt_image_tab_top_source {
    display: none !important;
}

.wt-image-tab-top {
    --wt-image-tab-top-frame-duration: 200ms;
    --wt-image-tab-top-nav-height: 44px;
    --wt-image-tab-top-nav-padding: 4px;
    --wt-image-tab-top-nav-item-padding: 16px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto;
    width: min(100%, 1260px);
    margin: 64px auto;
    box-sizing: border-box;
}

.wt-image-tab-top-media-stage {
    position: relative;
    width: 80%;
    margin-inline: auto;
    height: var(--wt-image-tab-top-media-height, auto);
    min-height: 220px;
    padding: 16px;
    overflow: hidden;
    background: #FAFAFC;
    border-radius: 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

.wt-image-tab-top.wt-image-tab-carousel-active .wt-image-tab-top-media-stage {
    overflow: visible;
    background: transparent;
}

.wt-image-tab-top-media-item {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #FAFAFC;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity var(--wt-image-tab-top-frame-duration) ease-in-out,
        visibility 0s linear var(--wt-image-tab-top-frame-duration);
}

.wt-image-tab-top-media-item.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition-delay: 0s;
}

.wt-image-tab-top-media-item > .fig,
.wt-image-tab-top-media-item > fig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.wt-image-tab-top-media-item > img.image,
.wt-image-tab-top-media-item .fig > img.image,
.wt-image-tab-top-media-item fig > img.image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0;
    object-fit: contain;
}

.wt-image-tab-top-media-item .fig_caption,
.wt-image-tab-top-media-item figcaption {
    display: none;
}

.wt-image-tab-top-supplement-stage {
    width: 80%;
    margin: 16px auto 0;
    min-width: 0;
}

.wt-image-tab-top-nav-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
    position: relative;
    z-index: 2;
}

.wt-image-tab-top-nav-platter {
    position: relative;
    height: var(--wt-image-tab-top-nav-height);
    max-width: 100%;
    padding: var(--wt-image-tab-top-nav-padding);
    box-sizing: border-box;
    background: rgb(232 232 237);
    border-radius: 999px;
    overflow: hidden;
}

.wt-image-tab-top-nav-mask {
    position: relative;
    height: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior: none;
}

.wt-image-tab-top-nav-mask::-webkit-scrollbar {
    display: none;
}

.wt-image-tab-top-nav-items {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.wt-image-tab-top-nav-item {
    position: relative;
    height: 100%;
    color: #1d1d1f;
    transition: color 160ms ease-out;
}

.wt-image-tab-top-nav-item.is-active {
    color: #fff;
}

.wt-image-tab-top-nav-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--wt-image-tab-top-nav-item-padding);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: .8;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 100ms ease-in-out;
}

.wt-image-tab-top-nav-link:hover,
.wt-image-tab-top-nav-link:focus-visible,
.wt-image-tab-top-nav-item.is-active .wt-image-tab-top-nav-link {
    opacity: 1;
}

.wt-image-tab-top-nav-link:focus-visible {
    outline: 2px solid var(--background-color-primary-button, #0071e3);
    outline-offset: -2px;
}

.wt-image-tab-top-nav-indicator {
    position: absolute;
    inset-block: var(--wt-image-tab-top-nav-padding);
    inset-inline-start: var(--wt-image-tab-top-nav-padding);
    z-index: 0;
    width: 0;
    border-radius: 999px;
    background: #1d1d1f;
    pointer-events: none;
    transition: width var(--wt-image-tab-top-frame-duration) ease-out,
        transform var(--wt-image-tab-top-frame-duration) ease-out;
}

.wt-image-tab-top-nav-indicator.no-transition {
    transition: none;
}

.wt-image-tab-top-caption-stage {
    display: grid;
    grid-template-columns: 100%;
    width: min(100%, 720px);
    margin: 24px auto 0;
}

.wt-image-tab-top-caption {
    grid-area: 1 / 1;
    margin: 0;
    color: #1d1d1f;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--wt-image-tab-top-frame-duration) ease-in-out,
        transform var(--wt-image-tab-top-frame-duration) ease-in-out,
        visibility 0s linear var(--wt-image-tab-top-frame-duration);
}

.wt-image-tab-top-caption.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.wt-image-tab-top-caption p,
.wt-image-tab-top-caption .p {
    margin: 0;
}

@media (max-width: 734px) {
    .wt-image-tab-top {
        width: 100%;
        margin: 36px 0 48px;
    }

    .wt-image-tab-top-media-stage {
        width: 100%;
        min-height: 160px;
        padding: 12px;
        border-radius: 10px;
    }

    .wt-image-tab-top-supplement-stage {
        width: 100%;
    }

    .wt-image-tab-top-nav-wrapper {
        justify-content: flex-start;
        margin-top: 20px;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .wt-image-tab-top-nav-platter {
        width: 100%;
    }

    .wt-image-tab-top-caption-stage {
        width: auto;
        margin: 20px 24px 0;
        text-align: left;
    }
}

@media (max-width: 420px) {
    .wt-image-tab-top-media-stage {
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wt-image-tab-top-media-item,
    .wt-image-tab-top-nav-item,
    .wt-image-tab-top-nav-link,
    .wt-image-tab-top-nav-indicator,
    .wt-image-tab-top-caption {
        transition: none;
    }
}