#tool .step[hidden] { display: none; }
#tool h3 { font-size: 1.5em; margin: 0 0 2px; }
#tool .label { color: var(--text-light); font-size: 0.9em; margin: 0 0 6px; }
#tool .chart::before { content: ""; display: block; width: 48px; height: 6px; background: var(--code); margin-bottom: 10px; }
#tool .chart + .chart { margin-top: 2em; }
#tool .chart svg { display: block; max-width: 100%; height: auto; }

#tool .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2.5em; align-items: start; margin-top: 1em; }
#tool .step.result { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
#tool .step.result .why { grid-column: 1 / -1; }
#tool .controls > p:first-child, #tool #explanation { margin-top: 0; }
#tool #explanation { padding-left: 1.2em; }
#tool #explanation li { margin-bottom: 0.6em; }

#steps { padding: 0; }
#steps button { margin: 0 0.5em 1em; background: none; color: var(--text); border-color: var(--border); border-radius: 0; padding: 0.1em 1em; }
#steps button:enabled:hover { background: none; border-color: var(--accent); color: var(--accent); }
#steps button[aria-current="step"], #steps button[aria-current="step"]:enabled:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

#tool fieldset label { display: inline-block; margin-right: 1em; }
#tool label.slider { display: block; margin: 0 0 0.6em; }
#tool input[type="radio"] { width: 1.1em; height: 1.1em; padding: 0; margin: 0 0.3em 0.2em 0; }
#tool input[type="radio"]:checked::after { top: 50%; left: 50%; width: 0.5em; height: 0.5em; transform: translate(-50%, -50%); font-size: inherit; }
#tool .buttons { display: flex; justify-content: space-between; margin-top: 2em; }
#tool .buttons button[hidden] { display: inline-block; visibility: hidden; }

#tool input[type="range"] { display: block; width: 100%; height: 1.4em; margin: 0; padding: 0; border: 0; background: transparent; }
#tool input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #d3d8dc; border-radius: 2px; }
#tool input[type="range"]::-moz-range-track { height: 4px; background: #d3d8dc; border-radius: 2px; }
#tool input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--accent); }
#tool input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); }
#tool input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#tool .centered { position: relative; display: block; }
#tool .centered::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; background: var(--border); }
#tool .centered input { position: relative; z-index: 1; }

#tool button.reset { margin: 0; padding: 0; background: none; border: 0; color: var(--accent); text-decoration: underline; }
#tool button.reset:enabled:hover { background: none; color: var(--accent-hover); }

#tool .legend-row { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
#tool .legend-row p { margin: 0; font-size: 0.9em; }
#tool .muted { color: var(--text-light); }
#tool button.icon { flex: none; margin: 0; padding: 4px; background: none; border: 0; border-radius: var(--standard-border-radius); color: var(--text-light); line-height: 0; }
#tool button.icon:enabled:hover { background: none; color: var(--accent); }

#tool .info { position: relative; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 0.3em; border: 1px solid var(--text-light); border-radius: 50%; color: var(--text-light); font-size: 0.7em; font-style: italic; line-height: 1.2em; text-align: center; vertical-align: 0.15em; cursor: help; }
#tool .info::before { content: "i"; }
#tool .info::after { content: attr(data-tip); display: none; position: absolute; z-index: 5; left: 50%; bottom: 1.9em; transform: translateX(-50%); width: 18em; max-width: 70vw; padding: 0.5em 0.8em; background: var(--text); color: var(--bg); border-radius: var(--standard-border-radius); font-size: 1.2em; font-style: normal; line-height: 1.35; text-align: left; }
#tool .info:hover::after, #tool .info:focus::after { display: block; }

.intro { max-width: 45em; }

@media only screen and (max-width: 720px) {
  #tool .step, #tool .step.result { grid-template-columns: minmax(0, 1fr); gap: 1.5em; }
  #steps button { margin: 0 0.3em 0.6em; padding: 0.1em 0.6em; }
}

#title .beta { font-size: 0.5em; font-weight: normal; color: var(--text-light); }
#tool #legend .line { display: block; }
#tool .chart svg.key { display: inline-block; vertical-align: -5px; }