/* Readable HTML instruments sit outside the zooming illustration. */
.scene-panel { min-height: 0; }
.scene-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 0 20px 12px; }
.scene-toolbar strong { display: block; font-size: .91rem; color: #15334a; }
.scene-toolbar span { display: block; font-size: .8rem; color: #3c596a; margin-top: 3px; }
.camera-status { text-align: right; flex-shrink: 0; }
.camera-status #scenePhase { display: inline-block; padding: 4px 8px; margin: 0 0 4px; background: #edf5f6; color: #24576a; border-radius: 5px; font-weight: 800; font-size: .72rem; }
.camera-status small { display: block; color: #516977; font-size: .69rem; }
.fixed-sand-note { padding: 10px 12px; margin: 4px 0 15px; background: #f2f7f4; border-left: 3px solid #6ca997; color: #365d54; font-size: .78rem; border-radius: 0 7px 7px 0; }
.height-ruler-label { position: absolute; transform: translate(-50%, -50%); padding: 4px 7px; background: #fffffff0; color: #254958; border: 1px solid #c9deda; border-radius: 6px; font-size: clamp(.68rem, 1.05vw, .86rem); font-weight: 800; white-space: nowrap; pointer-events: none; }
.force-callout { position: absolute; width: clamp(113px, 28%, 180px); padding: 8px 9px; border: 1px solid #8db6bc; border-left: 4px solid #087682; border-radius: 9px; background: #fffffff5; box-shadow: 0 2px 7px #1c4b5317; color: #164655; pointer-events: none; }
.force-callout.down { border-color: #d2a593; border-left-color: #b44930; color: #84391f; }
.force-callout span, .force-callout small { display: block; line-height: 1.3; }
.force-callout span { font-size: clamp(.62rem, 1vw, .8rem); font-weight: 750; }
.force-callout strong { display: block; font-size: clamp(.92rem, 1.5vw, 1.22rem); margin: 3px 0 2px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.force-callout small { font-size: clamp(.59rem, .8vw, .68rem); color: #49616b; }
.energy-panel { margin: 15px 16px 0; border: 1px solid #d8e5e8; border-radius: 11px; background: #fff; padding: 14px 15px; }
.energy-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 14px; justify-content: space-between; margin-bottom: 10px; }
.energy-heading h3 { margin: 0; font-size: .88rem; color: #1a3f51; }
.energy-heading span { font-size: .71rem; color: #526a76; }
.energy-row + .energy-row { margin-top: 12px; }
.energy-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.energy-row label { margin: 0; font-size: .78rem; color: #304f60; font-weight: 650; }
.energy-row output { white-space: nowrap; font-size: .82rem; font-weight: 800; color: #173e51; font-variant-numeric: tabular-nums; }
.energy-row progress { display: block; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 20px; overflow: hidden; background: #eaf0f2; accent-color: #bd7a12; }
.energy-row progress::-webkit-progress-bar { background: #eaf0f2; border-radius: 20px; }
.energy-row progress::-webkit-progress-value { background: #c88921; border-radius: 20px; }
.energy-row progress::-moz-progress-bar { background: #c88921; border-radius: 20px; }
.sand-energy progress { accent-color: #16878b; }
.sand-energy progress::-webkit-progress-value { background: #16878b; }
.sand-energy progress::-moz-progress-bar { background: #16878b; }
.scene-caption { color: #345363; padding-bottom: 10px; }
.force-snapshot-note { margin: 0 20px 16px; padding: 9px 11px; font-size: .73rem; color: #365768; background: #f0f7f8; border-radius: 7px; line-height: 1.5; }
.net-force-reading { font-size: .78rem; color: #375666; margin: 12px 0; }
.net-force-reading strong { display: block; font-size: .96rem; color: #123e54; margin-top: 4px; }
.math-note summary { cursor: pointer; font-weight: 800; color: #385463; }
.math-note p { line-height: 1.5; }
.control-panel :disabled { cursor: wait; opacity: .6; }
@media (max-width: 560px) {
  .scene-heading { flex-direction: row; gap: 7px; }
  .scene-toolbar { padding-left: 14px; padding-right: 14px; }
  .scene-toolbar strong { font-size: .8rem; }
  .canvas-wrap { margin-left: 8px; margin-right: 8px; }
  .force-callout { padding: 5px 6px; width: min(112px, 38%); border-left-width: 3px; }
  .force-callout small { display: none; }
  .energy-panel { margin-left: 8px; margin-right: 8px; }
  .energy-row label { font-size: .72rem; }
}