/* Preserve the approved page/card layout; only new diagram styling lives here. */
.exploration-shell .parameter { grid-column: 1 / -1; }
.exploration-shell .parameter output { color: #087c86; margin-left: .5rem; font-variant-numeric: tabular-nums; }
.exploration-shell .parameter input { min-height: 40px; accent-color: #087c86; }
.exploration-shell button, .exploration-shell select, .exploration-shell summary { min-height: 44px; }
.exploration-shell .experiment-heading { align-items: start; flex-wrap: wrap; }
.exploration-scene { margin: 16px 0; border-radius: 12px; background: #f5fafb; }
.exploration-scene .exploration-label { font: 24px "Yu Gothic", system-ui, sans-serif; fill: #315461; }
.exploration-shell .control-note, .exploration-legend { font-size: 1rem; line-height: 1.8; }
.exploration-readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.exploration-readings p { margin: 0; background: #e2f1e9; padding: 12px; font-variant-numeric: tabular-nums; }
.exploration-readings strong { display: block; font-size: 1.2rem; }
.exploration-shell .keyword-hint { font-size: .875rem; }
.exploration-shell .lesson-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 24px; }
.cool-panel { margin-top: 16px; padding: 14px; border: 1px solid #87bdcc; border-radius: 12px; line-height: 1.8; }
#cool-button { grid-column: 1 / -1; }
.exploration-shell .small-action { font-size: .9rem; }
.solubility-scene { display:block;width:100%;background:#fff;border:1px solid #c8dde3;border-radius:12px;margin-top:24px; }
.solubility-scene text { font-family:"Yu Gothic",system-ui,sans-serif; }
.graph-key,#solubility-calculation,.model-source { font-size:1rem;line-height:1.8;overflow-wrap:anywhere; }
@media (max-width: 560px) {
  .exploration-readings { grid-template-columns: 1fr; }
  .exploration-shell .experiment-card { padding: 10px; }
}