/* 内部比较工具与官网画布分开，原生按钮可用键盘操作，手机允许工具行换行以免挤压页面选择。 */
.carousel-review{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 24px;background:#17172e;border-bottom:1px solid #b0a0d63d;color:#dfd9ee;font-size:12px}
.carousel-controls{display:flex;gap:4px;padding:3px;background:#11142980;border:1px solid #b9a9dc44;border-radius:9px}
.carousel-controls button{min-height:44px;padding:8px 14px;border:1px solid transparent;border-radius:6px;background:transparent;color:#e8e1f6;font:inherit;cursor:pointer}
.carousel-controls button[aria-pressed="true"]{background:linear-gradient(110deg,#9beefa,#bb9dfa);color:#101127;border-color:#d1ddf080}
.carousel-controls button:focus-visible{outline:2px solid #8ff5ff;outline-offset:2px}
#carousel-load-status{color:#bfb5d7}

/* 宽卡片仍使用原有布局；侧卡选择按钮和外置说明只在封面构图启用，不在旧方案中增加多余内容。 */
.cover-select,.cover-family-detail{display:none}
.cover-family-detail[hidden],.cover-select[hidden]{display:none!important}

/* 中央封面强调真实设备图，侧卡通过深度、角度和缩放退后；轨道宽度跟随官网画布，不依赖浏览器窗口宽度。 */
html[data-carousel="coverflow"] .glass-stage{--glass-width:clamp(330px,29cqw,440px);--glass-step:clamp(200px,22cqw,330px);height:614px}
html[data-carousel="coverflow"] .glass-card-deck{perspective:1300px;perspective-origin:50% 48%}
html[data-carousel="coverflow"] .glass-family-card{
  --card-depth:0px;--card-shift-y:0px;
  height:540px;padding:24px;display:flex;flex-direction:column;gap:0;border-radius:20px;
  transform:translate(-50%,-50%) translateX(calc(var(--glass-step)*var(--card-offset) + var(--drag-x))) translateY(var(--card-shift-y)) translateZ(var(--card-depth)) rotateY(var(--card-angle)) scale(var(--card-scale));
}
html[data-carousel="coverflow"] .glass-family-card.is-active{z-index:5}
html[data-carousel="coverflow"] .glass-family-card.is-neighbour{z-index:3;pointer-events:auto}
html[data-carousel="coverflow"] .glass-family-card.is-far{z-index:1;pointer-events:auto}
html[data-carousel="coverflow"] .glass-card-meta{flex-shrink:0;font-size:11px;line-height:1.5;gap:10px}
html[data-carousel="coverflow"] .glass-card-media{flex:1;min-height:0;margin:20px 0 22px;overflow:hidden;border-radius:12px}
/* 图片区域留出素材状态说明的位置，视差移动不会覆盖文字，也不会改变设备图的像素或比例。 */
html[data-carousel="coverflow"] .motion-product-plane{height:calc(100% - 35px)}
html[data-carousel="coverflow"] .glass-card-media img{max-height:295px;max-width:88%;object-fit:contain}
html[data-carousel="coverflow"] .glass-card-media .reference-note{font-size:10px;bottom:10px;padding:0 8px}
html[data-carousel="coverflow"] .glass-image-pending{padding:12px;gap:14px}
html[data-carousel="coverflow"] .glass-image-pending strong{font-size:34px}
html[data-carousel="coverflow"] .glass-image-pending span{font-size:11px}
html[data-carousel="coverflow"] .glass-card-copy{align-self:stretch;min-height:84px;display:flex;align-items:center}
html[data-carousel="coverflow"] .glass-card-copy::before{display:none}
html[data-carousel="coverflow"] .glass-card-copy h3{font-size:clamp(30px,2.6cqw,38px);line-height:1.08;letter-spacing:-.04em;font-weight:700;margin:0;width:100%;overflow-wrap:anywhere}
html[data-carousel="coverflow"] .glass-card-copy>p,
html[data-carousel="coverflow"] .glass-card-copy>.glass-card-link{display:none}

/* 侧卡覆盖一个透明原生按钮，整个可见区域都可选择；中央卡的目录入口集中在下方，避免一次点击同时切卡和跳页。 */
html[data-carousel="coverflow"] .cover-select{display:block;position:absolute;inset:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;color:inherit;z-index:4}
html[data-carousel="coverflow"] .cover-select:hover{box-shadow:inset 0 0 0 2px #c6ecff73}
html[data-carousel="coverflow"] .cover-select:focus-visible{outline:3px solid #a0f4ff;outline-offset:-5px;background:#bdefff06}
html[data-carousel="coverflow"] .cover-family-detail{display:flex;flex-direction:column;align-items:center;text-align:center;gap:17px;max-width:760px;min-height:145px;margin:0 auto;padding:2px 24px 22px;color:var(--aurora-muted)}
html[data-carousel="coverflow"] .cover-family-detail p{font-size:16px;line-height:1.75;max-width:650px;letter-spacing:-.01em;text-wrap:pretty}
html[data-carousel="coverflow"] .cover-family-detail .glass-card-link{font-size:14px;margin:0;min-height:44px}
html[data-carousel="coverflow"] .glass-controls{margin-top:0}

/* 中等画布继续保留五张封面的空间关系，中央图像略收紧，完整说明仍在卡片之外阅读。 */
@container website (max-width:1100px){
  html[data-carousel="coverflow"] .glass-stage{--glass-width:320px;--glass-step:clamp(165px,21cqw,230px);height:574px}
  html[data-carousel="coverflow"] .glass-family-card{height:504px;padding:22px}
  html[data-carousel="coverflow"] .glass-card-media img{max-height:265px}
  html[data-carousel="coverflow"] .glass-card-copy h3{font-size:30px}
}

/* 手机只保留中央封面与相邻提示，减少倾斜角度；竖向页面滚动仍使用原来的触摸规则，说明长度按内容自然展开。 */
@container website (max-width:700px){
  html[data-carousel="coverflow"] .glass-stage{--glass-width:calc(100cqw - 100px);--glass-step:calc(100cqw - 146px);height:516px}
  html[data-carousel="coverflow"] .glass-family-card{height:462px;padding:20px;border-radius:17px}
  html[data-carousel="coverflow"] .glass-card-copy{min-height:72px}
  html[data-carousel="coverflow"] .glass-card-copy h3{font-size:28px;line-height:1.1}
  html[data-carousel="coverflow"] .glass-card-media{margin:16px 0 17px}
  html[data-carousel="coverflow"] .glass-card-media img{max-height:245px;max-width:88%}
  html[data-carousel="coverflow"] .glass-card-meta{font-size:10px;gap:8px}
  html[data-carousel="coverflow"] .glass-card-media .reference-note{font-size:9px;line-height:1.35;bottom:9px}
  html[data-carousel="coverflow"] .cover-family-detail{min-height:0;padding:0 24px 26px;gap:12px}
  html[data-carousel="coverflow"] .cover-family-detail p{font-size:14px;line-height:1.75}
  html[data-carousel="coverflow"] .cover-family-detail .glass-card-link{font-size:13px}
}
@container website (max-width:350px){
  html[data-carousel="coverflow"] .glass-stage{--glass-width:calc(100cqw - 72px);--glass-step:calc(100cqw - 132px);height:491px}
  html[data-carousel="coverflow"] .glass-family-card{height:437px;padding:16px}
  html[data-carousel="coverflow"] .glass-card-copy h3{font-size:25px}
  html[data-carousel="coverflow"] .glass-card-media img{max-height:224px}
  html[data-carousel="coverflow"] .cover-family-detail{padding-left:20px;padding-right:20px}
}
@media(max-width:640px){.carousel-review{padding:10px 18px;gap:8px 12px}.carousel-controls button{padding:8px 10px}}