.mechanics-controls > .parameter, .mechanics-controls > .timeline-control { grid-column: 1 / -1; }
.parameter label { line-height: 1.5; }
.parameter output { display: inline-block; color: #087c86; margin-left: 6px; font-variant-numeric: tabular-nums; }
.parameter input, .timeline-control input { width: 100%; accent-color: #087c86; min-height: 36px; }
.mechanics-scene { border-radius: 12px; }
.mechanics-scene text { font-family: "Yu Gothic", system-ui, sans-serif; font-size: 24px; fill: #315461; }
.mechanics-scene .chart-label { font-size: 22px; }
.mechanics-legend { font-size: 1rem; line-height: 1.8; color: #315461; }
.mechanics-readings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.mechanics-readings p { margin: 0; padding: 10px; background: #eaf6ef; color: #216846; line-height: 1.6; font-variant-numeric: tabular-nums; }
.mechanics-readings strong { display: block; font-size: 1.15rem; }
.mechanics-shell .control-note, .mechanics-shell .scene-caption { font-size: 1rem; line-height: 1.8; }
.mechanics-shell button, .mechanics-shell select, .mechanics-shell summary { min-height: 44px; }
.mechanics-shell .experiment-heading { align-items: start; flex-wrap: wrap; }
.mechanics-shell .lesson-nav { margin-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.mechanics-shell .keyword-hint { font-size: .85rem; }
.mechanics-shell [hidden] { display: none !important; }
.mechanics-shell .timeline-control p { font-size: .9rem; line-height: 1.6; }
.mechanics-shell .result-value { margin-bottom: 12px; }
@media(max-width:560px) {
  .mechanics-shell .mechanics-readings { grid-template-columns: 1fr; }
  .mechanics-scene .diagram-label { display: none; }
  .mechanics-scene .chart-label { font-size: 28px; }
  .mechanics-shell .experiment-card { padding: 10px; }
}