/* A single recorded steering blend across the three position coordinates. */
.steering-story { margin-top:38px; padding-top:30px; border-top:1px solid var(--rule); }
.sc-header { display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; }
.sc-header h4 { margin:0; color:var(--green); }
.sc-header > span { color:var(--muted); }
.sc-intro { margin:14px 0 24px; }
.sc-stage { min-height:360px; }
.sc-stage > [hidden] { display:none; }
.sc-playback { display:flex; align-items:center; gap:24px; border-block:1px solid var(--rule); padding:18px 0; margin-top:28px; }
.sc-playback button,.sc-settings button { cursor:pointer; border:0; border-bottom:1px solid var(--green); background:none; color:var(--green); padding:8px 0; min-height:44px; white-space:nowrap; }
.sc-scrub { flex:1; display:flex; gap:12px; align-items:center; color:var(--muted); }
.sc-scrub > span { flex:none; }
.sc-scrub input { flex:1; min-width:90px; width:100%; accent-color:var(--green); cursor:pointer; }
.sc-weight { color:var(--green); white-space:nowrap; }
.sc-result { margin:20px 0; color:var(--green); }
.sc-inspection { margin-top:8px; }
.sc-inspection summary { color:var(--muted); cursor:pointer; padding:10px 0; }
.sc-settings { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin:16px 0; }
.sc-settings label { display:flex; align-items:center; gap:10px; }
.sc-settings select { background:var(--paper); border:1px solid var(--rule); border-radius:0; color:var(--ink); min-height:44px; padding:8px 12px; }
.sc-settings input { accent-color:var(--green); height:18px; width:18px; }
.sc-inspection p,.sc-provenance { margin:12px 0; color:var(--muted); }
.steering-story :is(button,input,select,summary):focus-visible { outline:2px solid var(--green); outline-offset:4px; }
@media(max-width:760px) {
 .sc-playback { flex-wrap:wrap; gap:12px 20px; }
 .sc-scrub { flex-basis:100%; order:3; }
 .sc-weight { margin-left:auto; }
 .sc-stage { min-height:960px; }
}
@media(max-width:480px) {
 .steering-story { margin-top:28px; padding-top:24px; }
 .sc-playback { align-items:flex-start; }
 .sc-weight { margin-left:0; }
 .sc-settings { flex-direction:column; align-items:flex-start; }
}

/* WUJI pose trail: one spacious 3D view, no enclosing panel. */
#steering-deployment .sc-stage { min-height:0; }
.sm-view { margin-top:22px; }
.sm-sequence { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:8px; color:var(--muted); font-size:var(--type-label); }
.sm-sequence .is-active { color:var(--green); text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1px; }
.sm-canvas { width:100%; height:430px; background:transparent; }
.sm-canvas canvas { display:block; width:100%; height:100%; cursor:grab; }
.sm-canvas canvas:active { cursor:grabbing; }
.sm-foot { display:flex; justify-content:space-between; align-items:center; gap:12px 24px; margin-top:16px; color:var(--green); font-size:var(--type-label); }
.sm-reset { background:none; border:0; color:var(--muted); cursor:pointer; min-height:44px; padding:8px 0; white-space:nowrap; }
.sm-note { color:var(--muted); font-size:var(--type-label); margin:10px 0 0; }
@media(max-width:760px) { .sm-canvas {height:360px;} .sm-foot {align-items:flex-start; flex-wrap:wrap;} }
@media(max-width:480px) { .sm-canvas {height:310px;} }
@media(max-width:480px) {
 #steering-deployment .sc-playback { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center; }
 #steering-deployment .sc-weight { white-space:normal; text-align:right; }
 #steering-deployment .sc-scrub { grid-column:1 / -1; }
}
.sm-canvas { position:relative; }
.sm-labels { position:absolute; inset:0; pointer-events:none; }
.sm-labels span { position:absolute; transform:translate(-50%,15px); color:var(--green); white-space:nowrap; font-size:var(--type-label); }
.sm-labels span:nth-child(2) { transform:translate(-50%,-100%); }
.sm-scene-grid {display:grid; grid-template-columns:minmax(200px,.8fr) minmax(0,2fr); gap:28px; align-items:center;}
.sm-recording {margin:0; min-width:0;}
.sm-recording video {display:block; width:100%; height:auto; border-radius:0;}
.sm-recording figcaption {margin-top:12px; font-size:var(--type-label); color:var(--muted);}
@media(max-width:760px){.sm-scene-grid {grid-template-columns:1fr; gap:8px;}.sm-recording {display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:center;}.sm-recording figcaption {margin:0;}}

/* Target locations are reference markers, not rendered replacement objects. */
.sm-target-key {display:flex; gap:12px 26px; flex-wrap:wrap; margin:20px 0 8px; font-size:var(--type-label); color:var(--muted);}
.sm-target-key span {display:inline-flex; align-items:center; gap:9px;}
.sm-target-key b,.sm-target-labels span {display:grid; place-items:center; width:calc(var(--type-label) * 1.6); height:calc(var(--type-label) * 1.6); padding:0; box-sizing:border-box; flex:none; border-radius:50%; background:#f1e9dc; color:#80643f; font-weight:600;}
.sm-target-key span:last-child b,.sm-target-labels span:last-child {background:#dce9d7; color:var(--green);}
.sm-target-labels {position:absolute; inset:0; pointer-events:none;}
.sm-target-labels span {position:absolute; transform:translate(-50%,14px); font-size:var(--type-label); box-shadow:0 0 0 3px var(--paper);}
.sm-target-labels span[hidden] {display:none;}

/* Thin visible timeline with a full-height pointer target. */
.sc-scrub input[type="range"] {appearance:none; -webkit-appearance:none; height:44px; padding:0; background:transparent;}
.sc-scrub input[type="range"]::-webkit-slider-runnable-track {height:2px; border:0; border-radius:0; background:linear-gradient(to right,var(--green) 0 var(--scrub-progress,100%),var(--rule) var(--scrub-progress,100%) 100%);}
.sc-scrub input[type="range"]::-webkit-slider-thumb {appearance:none; -webkit-appearance:none; width:14px; height:14px; margin-top:-6px; border:0; border-radius:50%; background:var(--green);}
.sc-scrub input[type="range"]::-moz-range-track {height:2px; border:0; border-radius:0; background:var(--rule);}
.sc-scrub input[type="range"]::-moz-range-progress {height:2px; background:var(--green);}
.sc-scrub input[type="range"]::-moz-range-thumb {width:14px; height:14px; border:0; border-radius:50%; background:var(--green);}
.sc-scrub input[type="range"]:focus-visible {outline:2px solid var(--green); outline-offset:0;}