/* 与首页共用字体、色板；仅控制交互模型区域。 */
.assembly-viewer { align-self: center; width: 100%; }
.assembly-stage { display: block; position: relative; width: 100%; height: clamp(340px,38vw,460px); padding: 0; border: 0; border-radius: 4px; background: transparent; overflow: hidden; cursor: pointer; isolation: isolate; }
.assembly-stage:disabled { cursor: default; opacity: 1; }
.assembly-stage:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.assembly-ground { position: absolute; z-index: -1; width: 52%; height: 9%; left: 24%; bottom: 15%; background: radial-gradient(ellipse,#282d2920,transparent 68%); transition: opacity .6s; }
.assembly-fallback { display: block; position: absolute; inset: 0; transform-origin: 50% 60%; transition: opacity .3s, visibility 0s; }
.assembly-fallback>img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; filter: grayscale(.85); transition: transform .75s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.assembly-stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .3s; }
.has-model .assembly-stage canvas { opacity: 1; }
.has-model .assembly-fallback { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.assembly-label { position: absolute; z-index: 2; right: 2%; padding: 3px 6px; background: var(--bg); font: 12px/1.6 var(--font-sans); color: var(--muted); opacity: 0; transform: translateY(-50%); transition: opacity .3s; pointer-events: none; }
.assembly-label:before { content: ""; position: absolute; top: 50%; width: 24px; right: calc(100% + 6px); border-top: 1px solid var(--line); }
.assembly-label[data-part-label="sleeve"] { top: 23%; }
.assembly-label[data-part-label="ring"] { top: 49%; }
.assembly-label[data-part-label="base"] { top: 78%; }
.assembly-viewer.is-expanded .assembly-label { opacity: 1; transition-delay: .25s; }
.assembly-viewer.is-expanded .assembly-ground { opacity: .55; }
.assembly-viewer.is-expanded .assembly-fallback>img:nth-child(1) { transform: translateY(21%) scale(.88); }
.assembly-viewer.is-expanded .assembly-fallback>img:nth-child(2) { transform: translateY(-1%) scale(.88); }
.assembly-viewer.is-expanded .assembly-fallback>img:nth-child(3) { transform: translateY(-26%) scale(.88); }
.assembly-viewer.is-ready:not(.has-model) .assembly-fallback { animation: assembly-sway 9s ease-in-out infinite; animation-play-state: paused; }
.assembly-viewer.is-moving:not(.has-model) .assembly-fallback { animation-play-state: running; }
@keyframes assembly-sway { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.assembly-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; }
.assembly-action { padding: 12px 0; font-size: 13px; font-weight: 500; line-height: 1.6; }
.assembly-action:hover { color: var(--accent); }
.assembly-motion { color: var(--muted); font-weight: 400; }
.assembly-motion:disabled { cursor: default; opacity: .65; }
.assembly-status { min-height: 36px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.assembly-viewer figcaption { margin-top: 2px; }
@media (max-width: 900px) { .assembly-stage { height: 360px; } }
@media (max-width: 700px) { .assembly-stage { height: 340px; } .assembly-label { right: 1%; font-size: 12px; } .assembly-label:before { width: 16px; } .assembly-controls { min-height: 46px; } .assembly-status { font-size: 12px; min-height: 40px; } }
@media (max-width: 370px) { .assembly-stage { height: 310px; } .assembly-label { right: 0; padding-inline: 3px; } .assembly-label:before { width: 9px; right: calc(100% + 3px); } }
@media (prefers-reduced-motion: reduce) { .assembly-fallback,.assembly-fallback>img,.assembly-label,.assembly-ground { animation: none !important; transition: none !important; } }