/* 第 3 课专用：头盔实验台的舞台、剪影小窗、编号控件组。颜色全部走 site.css 的变量。 */
.u3-stage { position: relative; background: var(--card); border-radius: 4px; overflow: hidden; }
.u3-stage canvas { display: block; width: 100%; height: auto; cursor: grab; }
.u3-stage canvas:active { cursor: grabbing; }
.u3-tag { position: absolute; left: 10px; top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); pointer-events: none; }
.u3-drag { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: var(--muted); pointer-events: none; }
.u3-inset { position: absolute; pointer-events: none; border: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: flex-start; padding: 4px 6px; box-sizing: border-box; }
.u3-inset-t, .u3-inset-n { font-size: 11.5px; line-height: 1.3; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0; }
.u3-inset-t { font-family: var(--font-sans); }
.u3-fail { padding: 18px; color: var(--ink-2); font-size: 15px; }
.u3-readout { min-height: 3.2em; }
.u3-groups { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.u3-group legend { display: flex; align-items: baseline; gap: 8px; }
.u3-no { font-family: var(--font-mono); color: var(--safelight); letter-spacing: 0.08em; }
.u3-q { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 2px 0 8px; }
.u3-view .lk-ctl { margin-top: 4px; }
.u3-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.u3-pair img { width: 100%; height: auto; display: block; }
.u3-pair .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin: 6px 0 0; }
@media (max-width: 520px) { .u3-pair { grid-template-columns: 1fr; gap: 10px; } }
/* 超椭圆截面 */
.u3-sup-box { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.u3-sup-curve { fill: none; stroke: var(--st-2); stroke-width: 2; }
.u3-sup-poly { fill: color-mix(in srgb, var(--st-2) 12%, transparent); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.u3-sup-pt { fill: var(--ink); }
.u3-sup-v4 { fill: none; stroke: var(--safelight); stroke-width: 1.6; stroke-dasharray: 5 4; }
/* v4 / v5 做法对照表 */
table.data.u3-cmp td:first-child { color: var(--muted); white-space: nowrap; }
/* 真实帧并排 */
.u3-pair figure { margin: 0; }
.u3-pair figcaption { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; }
.u3-sup { margin: 22px 0 26px; }
.u3-sup-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.u3-sup-cell { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 8px 6px 6px; }
.u3-sup-cell svg { display: block; width: 100%; height: auto; }
.u3-sup-cell figcaption { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--muted); }
.u3-sup-cell figcaption b { display: block; font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
.u3-sup-v4poly { fill: color-mix(in srgb, var(--safelight) 10%, transparent); stroke: var(--safelight); stroke-width: 1.4; stroke-linejoin: round; }
@media (max-width: 620px) { .u3-sup-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.u3-inset .u3-inset-t, .u3-inset .u3-inset-n { white-space: nowrap; }
@media (max-width: 560px) { .u3-long { display: none; } .u3-drag { display: none; } }
@media (max-width: 560px) { .u3-tag { display: none; } }