/* 第 9 课专用：实验台 D-1「皮跟着骨头走」、D-2「拖手」、D-3「谁在推」。颜色全部走 site.css 的变量，深浅主题自动跟着换。 */

.u9-stage { position: relative; }
.u9-stage .u9-svg { display: block; width: 100%; height: auto; overflow: hidden; user-select: none; -webkit-user-select: none; }
.u9-stage.is-ik .u9-svg { cursor: crosshair; }

/* 图上的字：描一圈卡片底色，压在线上也读得清 */
.u9-svg .lab-t { fill: var(--ink-2); font-size: 13px; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.u9-svg .lab-t-strong { fill: var(--ink); font-weight: 600; font-family: var(--font-mono); letter-spacing: 0; }
.u9-svg .lab-t-muted { fill: var(--muted); font-weight: 400; }
.u9-svg .lab-t-bad { fill: var(--safelight); font-weight: 600; }
.u9-svg .lab-t-mono { font-family: var(--font-mono); letter-spacing: 0; font-size: 12px; }

/* D-2 手臂 */
.u9-body { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.u9-body-line { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.u9-bone { stroke: var(--st-6); stroke-width: 9; stroke-linecap: round; }
.u9-ghost { stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 5; opacity: 0.85; }
.u9-joint { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.u9-wrist { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.u9-alt { fill: none; stroke: var(--st-6); stroke-width: 1.5; stroke-dasharray: 2 2; }
.u9-arc { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.u9-ref { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.u9-gap { stroke: var(--safelight); stroke-width: 2; stroke-dasharray: 4 3; }
.u9-hold { fill: none; stroke: var(--safelight); stroke-width: 2; }
.u9-circ { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.u9-d { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0.7; }
.u9-ball { fill: color-mix(in srgb, var(--chart-a) 78%, var(--card)); stroke: var(--ink); stroke-width: 1.5; }
.u9-ball-seam { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.55; }
.u9-handle { cursor: grab; outline: none; }
.u9-handle:active { cursor: grabbing; }
.u9-handle-hit { fill: transparent; touch-action: none; }
.u9-handle-ring { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 2; }
.u9-handle-x { stroke: var(--accent); stroke-width: 1.5; }
.u9-handle:focus-visible .u9-handle-ring { stroke-width: 3.5; stroke: var(--ink); }

/* D-3 走路 */
.u9-ground-fill { fill: var(--paper-2); }
.u9-ground { stroke: var(--ink-2); stroke-width: 1.5; }
.u9-tick { stroke: var(--line-2); stroke-width: 1.2; }
.u9-flag { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.u9-print { fill: var(--ink-2); opacity: 0.55; }
.u9-print.is-far { opacity: 0.3; }
.u9-streak { stroke: var(--safelight); stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.u9-streak.is-live { opacity: 1; }
.u9-arrow { fill: none; stroke: var(--safelight); stroke-width: 2; opacity: 0.45; }
.u9-arrow.is-live { opacity: 1; }
.u9-limb { stroke: var(--st-6); stroke-width: 6; stroke-linecap: round; }
.u9-limb.is-far { stroke: color-mix(in srgb, var(--st-6) 45%, var(--card)); }
.u9-limb.u9-foot { stroke-width: 5; }
.u9-torso { stroke-width: 7; }
.u9-head { fill: var(--card); stroke: var(--st-6); stroke-width: 3; }
.u9-pelvis { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.u9-fig.is-ghost .u9-limb, .u9-fig.is-ghost .u9-head { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; fill: none; opacity: 0.8; }
.u9-fig.is-ghost .u9-pelvis { fill: var(--muted); stroke: none; }
.u9-gapv { stroke: var(--safelight); stroke-width: 2; }

/* 读数里的算式 */
.u9-readout .u9-calc, .lab-readout .u9-calc { display: inline-block; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; color: var(--ink-2); }
.lab-readout .big { white-space: nowrap; }
.lab-group .lk-ctl.is-off .lk-ctl-label, .lab-group .lk-ctl.is-off .lk-ctl-out { color: var(--muted); }
.lab-group .lk-ctl.is-off input, .lab-group .lk-ctl.is-off select { cursor: not-allowed; }
.lab-group .lk-btn.is-off { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.lab-group .lk-btn { min-height: 44px; }

/* 两张并排的真实画面 */
.pair-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13px; color: var(--muted); margin: 8px 0 0; text-align: center; }

/* 实验台里的按钮：不套标签—滑杆那种三栏网格 */
.lab-group button.lk-ctl { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 7em; padding: 0 16px; margin-top: 6px; }

/* D-1 皮跟着骨头走（蒙皮） */
.u9-skin { fill: color-mix(in srgb, var(--ink) 7%, var(--card)); stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; }
.u9-skin-rest { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.u9-bone.u9-bone-thin { stroke-width: 5; opacity: 0.9; }
.u9-helper { stroke: var(--st-6); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 3; }
.u9-vtx { stroke: var(--card); stroke-width: 1; }
.u9-chord { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.8; }
.u9-pos { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.5; }
.u9-pos.u9-pos-m { stroke: var(--st-6); }
.u9-pick { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.u9-thin { stroke: var(--safelight); stroke-width: 2.5; stroke-linecap: round; }
.u9-wbox { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
.u9-band { fill: color-mix(in srgb, var(--chart-b) 10%, transparent); }
.u9-wline { fill: none; stroke: var(--chart-b); stroke-width: 2; }
.u9-wline.u9-wline-m { stroke: var(--st-6); stroke-dasharray: 5 3; }
.u9-wdot { fill: var(--chart-b); }