html,body{max-width:100%;overflow-x:hidden}.hero h1,.section-heading h2,.workflow-section h2,.buy-copy h2,.story-intro h2,.palette-showcase h2{overflow-wrap:anywhere;text-wrap:balance}.hero-actions>*{min-width:0}.hero-actions .primary,.hero-actions .secondary{white-space:normal;text-align:center}.panel-title b,.match-row b,.panel-brand,.panel-match{min-width:0}.panel-title b,.match-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:flex;align-items:center;gap:8px}.language-switch{border:1px solid #d2cfd8;border-radius:8px;padding:8px 10px;background:transparent;color:#58535f;font-size:12px;font-weight:800}
@media(max-width:800px){.story-track{height:auto}.story-stage{min-height:760px}.ai-canvas{top:70px;bottom:258px;left:14px;right:14px}.match-panel{right:14px;bottom:18px;width:calc(100% - 28px);transform:none!important;transform-origin:center}.panel-match{min-height:34px}.stage-note{display:none}}
@media(max-width:540px){.site-header{height:64px;padding:0 16px;gap:10px}.brand{min-width:0;gap:7px;font-size:13px}.brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-mark{width:27px;height:27px;flex:none}.header-tools{gap:5px}.header-action{flex:none;padding:8px 10px;font-size:12px;white-space:nowrap}.language-switch{padding:8px 8px}.hero{min-height:0;padding:46px 16px 55px;gap:22px}.eyebrow{font-size:10px;letter-spacing:.08em}.hero h1{font-size:clamp(38px,12vw,52px);letter-spacing:-.07em}.hero-text{margin:18px 0;font-size:15px;line-height:1.7}.hero-actions{display:grid;grid-template-columns:1fr;gap:9px;align-items:stretch}.hero-actions .primary,.hero-actions .secondary{display:block;width:100%;padding:13px 12px;font-size:14px}.hero-actions .primary span{display:inline-block;margin:5px 0 0;padding:0 0 0 8px}.fine-print{font-size:11px;line-height:1.6}.hero-art{min-height:305px}.panel-window{width:100%;padding:10px;border-radius:13px}.panel-body{padding:11px 1px 2px}.picked{gap:9px;padding:9px}.picked-color{width:50px;height:50px}.picked strong{font-size:14px}.trust{gap:18px;padding:15px 16px;font-size:11px}.content-section,.faq-section{padding:70px 16px}.section-heading h2,.story-intro h2,.palette-showcase h2{font-size:clamp(34px,10vw,46px)}.feature{min-height:0;padding:22px}.feature h3{margin-top:26px;font-size:19px}.workflow-section{padding:65px 16px}.workflow-section li{gap:14px}.workflow-section h2,.buy-copy h2{font-size:clamp(34px,10vw,46px)}.buy-section{margin:70px 16px}.price-card{padding:28px 22px}.price{font-size:58px}.faq-section h2{font-size:36px}.story-section{padding:75px 16px 0}.story-stage{min-height:590px;border-radius:17px}.stage-caption{top:18px;left:18px;font-size:12px}.ai-canvas{top:61px;left:10px;right:10px;bottom:171px;border-radius:10px}.canvas-top{padding:8px 10px;font-size:9px}.match-panel{right:10px;bottom:12px;width:calc(100% - 20px);padding:12px;transform:none!important;transform-origin:center}.panel-current{margin:10px 0}.panel-search{margin-top:9px;padding:8px}.story-stage[data-step] .ai-canvas{right:10px}.sample-point{width:16px;height:16px}.eyedropper{font-size:34px}.story-steps{gap:8px;margin-bottom:65px}.palette-showcase{padding:65px 16px}.palette-ratio{height:180px}.palette-tabs{display:grid;grid-template-columns:1fr 1fr}.palette-tab{min-width:0;padding:9px 7px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-labels b{font-size:9px}footer{padding:24px 16px;font-size:11px}}
@media(max-width:360px){.hero h1{font-size:37px}.header-action{padding:7px;font-size:11px}.primary span{font-size:11px}.story-stage{min-height:560px}.match-panel{font-size:10px}.panel-current strong{font-size:13px}.palette-tabs{grid-template-columns:1fr}.price-card{padding:24px 18px}}
/* 演示面板始终作为耳机右侧的窄浮层，避免遮挡产品画面。 */
@media(max-width:800px){.story-stage{min-height:620px}.ai-canvas{top:62px;bottom:18px}.match-panel{width:470px;right:18px;top:106px;bottom:auto;transform:scale(.66)!important;transform-origin:top right}.panel-match{min-height:auto}}
@media(max-width:540px){.story-stage{min-height:570px}.ai-canvas{top:58px;bottom:16px}.match-panel{width:450px;right:9px;top:92px;transform:scale(.58)!important;transform-origin:top right}}
@media(max-width:800px) and (max-height:620px){.story-stage{min-height:500px}.ai-canvas{top:52px;bottom:14px}.match-panel{top:70px;right:12px;transform:scale(.54)!important}}
/* 画布窄时，为右侧面板保留真实留白；取样点与吸管属于 canvas-media，会同步移动。 */
@media(max-width:800px){.canvas-media{width:54%;height:auto;max-width:none;transform:translate(-45%,-5%)!important}}
@media(max-width:540px){.canvas-media{width:52%;transform:translate(-48%,-4%)!important}}
@media(max-width:800px) and (max-height:620px){.canvas-media{width:50%;transform:translate(-48%,-3%)!important}}
/* 手机竖屏空间不足时改为上下布局，不能继续强塞右侧浮层。 */
@media(max-width:540px){.story-stage{min-height:760px}.ai-canvas{top:58px;bottom:285px}.canvas-media{width:88%;transform:translate(-5%,-4%)!important}.match-panel{width:450px;right:8px;top:auto;bottom:16px;transform:scale(.55)!important;transform-origin:bottom right}}

/* 演示区：画布始终完整显示耳机，面板只占右侧留白。动画不能因响应式而失效。 */
.story-track{height:300svh!important}
.story-stage{position:sticky!important;top:0!important;min-height:100svh!important}
.canvas-media{width:min(90%,900px)!important;height:auto!important;max-width:90%!important;transform:none!important;transition:transform .7s cubic-bezier(.22,.75,.22,1)!important}
.canvas-media img{width:100%!important;height:auto!important;max-height:100%!important;transition:transform .7s cubic-bezier(.22,.75,.22,1)!important}
.match-panel{width:min(28%,320px)!important;min-width:0!important;right:32px!important;top:104px!important;bottom:auto!important;transform:none!important}
.ai-canvas{right:34%!important;transform:none!important}
.story-stage[data-step] .ai-canvas{right:34%!important;transform:none!important}

/* 平板与横屏手机：画板缩窄而不是裁切耳机，面板随比例缩小。 */
@media(max-width:900px){
  .story-track{height:280svh!important}
  .ai-canvas,.story-stage[data-step] .ai-canvas{top:76px!important;bottom:22px!important;left:18px!important;right:35%!important}
  .canvas-media{width:92%!important;max-width:92%!important}
  .match-panel{width:clamp(210px,30vw,270px)!important;right:14px!important;top:96px!important;bottom:auto!important;transform:none!important}
}

/* 竖屏：上下排布，优先保证耳机、吸管和取样点完整可见。 */
@media(max-width:540px){
  .story-track{height:300svh!important}
  .story-stage{min-height:100svh!important}
  .ai-canvas,.story-stage[data-step] .ai-canvas{top:62px!important;bottom:280px!important;left:10px!important;right:10px!important;transform:none!important}
  .canvas-media{width:92%!important;max-width:92%!important;transform:none!important}
  .match-panel{width:440px!important;right:9px!important;top:auto!important;bottom:14px!important;transform:scale(.52)!important;transform-origin:bottom right!important}
  .stage-caption{top:18px!important;left:18px!important}
}

@media(max-width:360px){
  .ai-canvas,.story-stage[data-step] .ai-canvas{bottom:264px!important}
  .match-panel{transform:scale(.48)!important}
}