/* 第 2 课专用：点积实验台、焦距与站位实验台。颜色一律走 site.css 的变量，深浅两套自动跟随。 */

/* 代码块、代码画的示意图（.fig-svg）的样式已并进 site.css。 */

/* ------------------------------------------------------------------ 实验台 2-1：点积照亮一面 */
.dot-host {
  --dot-lit: #f3ead6; --dot-dark: #3a3833;
}
:root[data-theme="dark"] .dot-host { --dot-lit: #efe3c8; --dot-dark: #1d1e21; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot-host { --dot-lit: #efe3c8; --dot-dark: #1d1e21; } }
.dot-svg { touch-action: pan-y; overflow: hidden; }
.dot-svg .dot-shadow { fill: rgb(0 0 0 / 0.55); }
.dot-svg .dot-shadow-t { font-size: 12px; fill: var(--muted); }
.dot-svg .dot-arc { fill: none; stroke: var(--grid); stroke-width: 1.5; stroke-dasharray: 4 5; }
.dot-svg .dot-ray { stroke: var(--st-4); stroke-width: 1; opacity: 0.35; }
.dot-svg .dot-house { fill: color-mix(in srgb, var(--paper-2) 70%, var(--line-2)); stroke: none; }
.dot-svg .dot-face { stroke: var(--line-2); stroke-width: 1; }
.dot-svg .dot-face.on { stroke: var(--ink); stroke-width: 2; }
.dot-svg .dot-val { font-family: var(--font-mono); font-size: 12.5px; fill: var(--ink-2); letter-spacing: 0; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.dot-svg .dot-val.on { fill: var(--ink); font-weight: 700; }
.dot-svg .dot-beam { fill: var(--st-4); opacity: 0.22; }
.dot-svg .dot-foot { stroke: var(--st-4); stroke-width: 5; stroke-linecap: round; }
.dot-svg .dot-n line { stroke: var(--ink); stroke-width: 2.4; } .dot-svg .dot-n path { fill: var(--ink); }
.dot-svg .dot-l line { stroke: var(--st-4); stroke-width: 2.4; } .dot-svg .dot-l path { fill: var(--st-4); }
.dot-svg .dot-n-t { font-family: var(--font-serif); font-weight: 700; font-size: 16px; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.dot-svg .dot-l-t { font-family: var(--font-serif); font-weight: 700; font-size: 16px; fill: var(--st-4); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.dot-svg .dot-theta { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.dot-svg .dot-theta-t { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-2); paint-order: stroke; stroke: var(--card); stroke-width: 3px; letter-spacing: 0; }
.dot-svg .dot-sun { fill: var(--st-4); stroke: var(--card); stroke-width: 3; }
.dot-svg .dot-sun-hit { fill: transparent; cursor: grab; touch-action: none; }
.dot-svg .dot-horizon { stroke: var(--line-2); stroke-width: 1; }

/* ------------------------------------------------------------------ 实验台 2-2：焦距与站位 */
.ln-view { margin: 0 0 4px; }
.ln-svg { display: block; width: 100%; height: auto; }
.ln-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 4px; }
.ln-lower.narrow { grid-template-columns: 1fr; }
.ln-panel { margin: 0; min-width: 0; }
.ln-panel figcaption { font-size: 13px; margin-top: 6px; }
.ln-readout .ln-big { font-family: var(--font-serif); font-weight: 600; }
.ln-readout .big { font-size: 24px; }
.ln-svg .ln-sky { fill: #dfe7ee; }
.ln-svg .ln-ground { fill: #b9b7a8; }
.ln-svg .ln-road { stroke: #8f8c7b; stroke-width: 1; }
.ln-svg .ln-house { fill: #e2c98e; stroke: #9c8656; stroke-width: 0.6; }
.ln-svg .ln-cornice { fill: #f4ecd9; }
.ln-svg .ln-win { fill: #5e6f73; }
.ln-svg .ln-trunk { fill: #6f716a; }
.ln-svg .ln-root { stroke: #6f716a; }
.ln-svg .ln-crown ellipse { fill: #3f6a45; stroke: #2f5234; stroke-width: 0.6; }
.ln-svg .ln-person { fill: var(--safelight); }
.ln-svg .ln-post { fill: #33312c; }
.ln-svg .ln-chain { stroke: #33312c; stroke-width: 0.8; }
.ln-svg .ln-frame { fill: none; stroke: var(--line-2); stroke-width: 1; }
.ln-svg .ln-crop-mask { fill: rgb(20 20 20 / 0.42); }
.ln-svg .ln-crop { fill: none; stroke: var(--safelight); stroke-width: 2; }
:root[data-theme="dark"] .ln-svg .ln-sky { fill: #b9c6d2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ln-svg .ln-sky { fill: #b9c6d2; } }
.ln-plan .ln-cone { fill: color-mix(in srgb, var(--st-4) 18%, transparent); stroke: var(--st-4); stroke-width: 1; }
.ln-plan .ln-road-plan { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 3; }
.ln-plan .ln-house-plan { fill: #e2c98e; stroke: #9c8656; stroke-width: 0.8; }
.ln-plan .ln-crown-plan { fill: color-mix(in srgb, #3f6a45 35%, transparent); stroke: #3f6a45; stroke-width: 1; }
.ln-plan .ln-trunk-plan { fill: #6f716a; }
.ln-plan .ln-cam { fill: var(--ink); }
.ln-plan .ln-halo { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }