.product-operation{background:#f5f6f5}
.operation-intro{margin:15px 0 0;color:#687787;font-size:15px;line-height:1.7;word-break:keep-all}
.operation-card{overflow:hidden;border:1px solid #d9dfdf;border-radius:18px;background:#fff;box-shadow:0 18px 48px #263a4510}
.operation-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 32px;border-bottom:1px solid #e6ebef;background:#fff}
.operation-eyebrow{display:block;font-size:11px;letter-spacing:.1em;font-weight:750;color:#ad1e34}
.operation-heading h3{margin:7px 0 11px;font:750 clamp(23px,2.6vw,32px)/1.2 Arial,sans-serif;letter-spacing:-.025em;color:#1c3040}
.operation-badges{display:flex;flex-wrap:wrap;gap:7px}
.operation-badges>span{padding:5px 9px;border-radius:4px;background:#f0f3f6;color:#506478;font-size:11px;font-weight:600;line-height:1.4}
.operation-badges>span:first-child{background:#faedf0;color:#a32438}
.operation-model-picker{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#6c7b89;font-weight:600;min-width:175px}
.operation-model-picker select{appearance:auto;width:100%;min-height:44px;border:1px solid #ccd5dd;border-radius:6px;background:#fff;padding:9px 12px;color:#20394e;font:600 14px/1.4 var(--font);cursor:pointer}
.operation-environment{display:inline-flex;align-items:center;gap:8px;color:#677875;font-size:12px;font-weight:600;white-space:nowrap}
.operation-environment>span{width:6px;height:6px;border-radius:50%;background:#8a9c91;box-shadow:0 0 0 4px #eff2ed}
.operation-stage{position:relative;height:clamp(320px,calc(100svh - 450px),480px);min-height:320px;max-height:480px;background:#e5e8e5;isolation:isolate;overflow:hidden}
.operation-canvas{position:relative;isolation:isolate;width:100%;height:100%}
.operation-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;filter:saturate(.76) contrast(.94) brightness(.98);z-index:0;pointer-events:none}
.operation-canvas::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#f8faf714 0%,#f8faf712 45%,#e5e6e136 100%);z-index:1;pointer-events:none}
.operation-canvas>svg{display:block;width:100%;height:100%;position:absolute;inset:0;overflow:hidden;z-index:2}
.operation-pan-hint{display:none}
.operation-stage:focus-visible{outline:3px solid #b62338;outline-offset:-3px}
.operation-console{position:relative;border-top:1px solid #dce4eb;background:#fff;padding:0 32px 24px}
.operation-steps{display:flex;gap:24px;border-bottom:1px solid #e8edf1;margin-bottom:20px;overflow-x:auto;scrollbar-width:thin}
.operation-steps button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:max-content;min-height:62px;padding:12px 2px;border:0;border-bottom:3px solid transparent;background:none;color:#758390;font:600 13px/1.5 var(--font);cursor:pointer;transition:color .2s,border-color .2s}
.operation-steps .operation-step-number{font:600 10px Arial,sans-serif;color:#95a3af}
.operation-steps button[aria-current="step"]{border-bottom-color:#bf233b;color:#a91e34}
.operation-steps button[aria-current="step"] .operation-step-number{color:#b8273d}
.operation-steps button:hover{color:#a91e34}
.operation-playback{display:grid;grid-template-columns:auto minmax(130px,1fr) minmax(120px,220px);align-items:center;gap:22px}
.operation-buttons{display:flex;gap:8px;align-items:center}
.operation-play,.operation-restart{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:92px;padding:9px 16px;border:1px solid #c8d2dc;border-radius:6px;background:#fff;color:#42586d;font:650 13px/1.4 var(--font);cursor:pointer}
.operation-play{background:#bc2339;border-color:#bc2339;color:#fff;min-width:112px}
.operation-play:hover{background:#9e1d30;border-color:#9e1d30}
.operation-restart:hover{background:#f2f5f8}
.operation-status{font-size:13px;line-height:1.6;font-weight:600;color:#475e72;margin:0;word-break:keep-all}
.operation-progress-label{display:flex;align-items:center;min-width:0;min-height:44px}
.operation-progress-label input{display:block;width:100%;margin:0;accent-color:#b62338;cursor:pointer;min-height:32px}
.operation-caption,.operation-reduced{font-size:11px;line-height:1.7;color:#7b8996;margin:14px 0 0}
.operation-reduced[hidden]{display:none}
.operation-card button:focus-visible,.operation-card select:focus-visible,.operation-card input:focus-visible{outline:3px solid #b62338;outline-offset:3px}
.product-detail-deck.is-tabs .operation-stage{max-height:490px;min-height:270px}
@media(max-width:1000px){.operation-playback{gap:14px;grid-template-columns:auto 1fr}.operation-progress-label{grid-column:1/-1}.operation-heading{padding:22px 24px}.operation-console{padding:0 24px 20px}.operation-stage{height:clamp(320px,47svh,460px)}}
@media(max-width:700px){
 .operation-intro{font-size:13px;margin-top:10px}.operation-card{border-radius:12px}
 .operation-heading{padding:19px 18px;gap:14px;align-items:flex-start}.operation-heading h3{font-size:23px}
 .operation-badges>span{font-size:10px;padding:4px 7px}.operation-model-picker{min-width:110px;max-width:46%;font-size:10px}.operation-model-picker select{font-size:12px;padding:8px}
 .operation-stage{height:clamp(330px,48svh,420px);min-height:330px;max-height:420px}
 .operation-environment{display:none}
 .product-operation[data-operation-family="articulated"] .operation-stage{height:660px;min-height:660px;max-height:660px}
 .product-operation[data-operation-family="scissor"][data-operation-phase="lineup"] .operation-stage,.product-operation[data-operation-family="scissor"][data-operation-phase="complete"] .operation-stage{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#aab5b5 #e9edeb;overscroll-behavior-x:contain}
 .product-operation[data-operation-family="scissor"][data-operation-phase="lineup"] .operation-canvas,.product-operation[data-operation-family="scissor"][data-operation-phase="complete"] .operation-canvas{min-width:760px}
 .product-operation[data-operation-family="scissor"][data-operation-phase="lineup"] .operation-pan-hint,.product-operation[data-operation-family="scissor"][data-operation-phase="complete"] .operation-pan-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:9px 12px;color:#63766e;background:#f3f5f1;font-size:10px;line-height:1.4}
 .operation-pan-hint>span{font-size:16px}
 .operation-console{padding:0 16px 16px}.operation-steps{gap:8px;margin-bottom:15px}.operation-steps button{font-size:11px;gap:4px;min-height:66px;min-width:0;flex-direction:column;word-break:keep-all}.operation-steps .operation-step-number{font-size:9px}
 .operation-playback{gap:10px 12px}.operation-play,.operation-restart{font-size:12px;min-width:70px;padding:8px 11px}.operation-play{min-width:92px}.operation-status{font-size:11px}
 .operation-progress-label{min-height:32px}.operation-caption{font-size:10px}
 .product-detail-deck.is-tabs .operation-stage{min-height:300px;max-height:400px}
}
.product-operation[data-operation-family="articulated"][data-operation-compact="true"] .operation-stage{height:660px;min-height:660px;max-height:660px}
@media(prefers-reduced-motion:reduce){.operation-steps button{transition:none}}
@media print{.operation-console,.operation-model-picker,.operation-pan-hint{display:none}.operation-stage{height:400px}.operation-card{break-inside:avoid;box-shadow:none}}
/* Metre-based SVG labels must not inherit page-level pixel letter spacing. */
.operation-canvas svg text{letter-spacing:normal}
