/* The heat-index lesson is self-contained and inherits the site's paper palette. */
.article-heat-index-experiment {
  --heat-paper: var(--surface-solid, #fffdf9);
  --heat-ink: var(--text, #2b2926);
  --heat-muted: var(--muted, #5f5b55);
  --heat-line: var(--line-strong, #bdb4aa);
  --heat-red: var(--red, #8f1d2c);
  --heat-purple: #6e477d;
  container: heat-lesson / inline-size;
  margin: 2rem 0;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--line, #d6cfc4);
  border-top: 4px solid var(--heat-red);
  border-radius: var(--radius, 8px);
  background: var(--heat-paper);
  color: var(--heat-ink);
  font: .95rem/1.6 var(--font, system-ui, sans-serif);
}
html[data-theme="dark"] .article-heat-index-experiment { --heat-purple: #c8a5dd; }
@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .article-heat-index-experiment {
    --heat-paper: #302c27; --heat-ink: #f7f3ea; --heat-muted: #c4bdb1; --heat-line: #81776c; --heat-red: #e18a91; --heat-purple: #c8a5dd;
  }
}
.article-heat-index-experiment *, .article-heat-index-experiment *::before, .article-heat-index-experiment *::after { box-sizing: border-box; }
.article-heat-index-experiment .heat-header { margin-bottom: 1.4rem; }
.article-heat-index-experiment .heat-eyebrow { margin: 0 0 .35rem; color: var(--heat-red); font: 800 .68rem/1.4 var(--font, system-ui, sans-serif); letter-spacing: .13em; text-transform: uppercase; }
.article-heat-index-experiment .heat-title { margin: 0 0 .6rem; color: var(--heat-ink); font: 700 clamp(1.25rem, 3.8cqi, 1.75rem)/1.2 var(--serif, Georgia, serif); text-wrap: balance; }
.article-heat-index-experiment .heat-intro { max-width: 55ch; margin: 0; color: var(--heat-muted); font: .9rem/1.6 var(--font, system-ui, sans-serif); }
.heat-workspace { display: grid; gap: 1.6rem; align-items: start; }
.heat-controls, .heat-output { min-width: 0; }
.heat-control + .heat-control { margin-top: 1.1rem; }
.heat-control label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; font-size: .88rem; font-weight: 750; }
.heat-control label > span { color: var(--heat-red); font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.heat-control input[type="range"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--heat-red); cursor: pointer; touch-action: pan-y; }
.heat-control input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--heat-line); }
.heat-control input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border: 3px solid var(--heat-paper); border-radius: 50%; background: var(--heat-red); box-shadow: 0 0 0 1px var(--heat-red); }
.heat-control input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--heat-line); }
.heat-control input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border: 3px solid var(--heat-paper); border-radius: 50%; background: var(--heat-red); box-shadow: 0 0 0 1px var(--heat-red); }
.heat-range-scale { display: flex; justify-content: space-between; color: var(--heat-muted); font-size: .73rem; line-height: 1.2; }
.article-heat-index-experiment .heat-keyboard { margin: .8rem 0 1.3rem; color: var(--heat-muted); font: .73rem/1.55 var(--font, system-ui, sans-serif); }
.heat-presets { min-width: 0; margin: 0; padding: 0; border: 0; }
.heat-presets legend { margin-bottom: .5rem; padding: 0; font-size: .85rem; font-weight: 750; }
.heat-preset-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.heat-preset-buttons button { min-width: 0; min-height: 62px; padding: .55rem .25rem; border: 1px solid var(--heat-line); border-radius: 6px; background: var(--heat-paper); color: var(--heat-ink); text-align: center; font: inherit; cursor: pointer; }
.heat-preset-buttons strong { display: block; font-size: .82rem; }
.heat-preset-buttons span { display: block; color: var(--heat-muted); font-size: .65rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.heat-preset-buttons button[aria-pressed="true"] { border-color: var(--heat-red); box-shadow: inset 0 -3px 0 var(--heat-red); background: color-mix(in srgb, var(--heat-red) 7%, var(--heat-paper)); }
.article-heat-index-experiment .heat-presets p { margin: .45rem 0 0; color: var(--heat-muted); font: .7rem/1.5 var(--font, system-ui, sans-serif); }
.heat-result { padding: 1rem 1.1rem; border-left: 3px solid var(--heat-purple); border-radius: 0 7px 7px 0; background: color-mix(in srgb, var(--heat-purple) 7%, var(--heat-paper)); }
.article-heat-index-experiment .heat-result-label { margin: 0; color: var(--heat-muted); font: 750 .72rem/1.5 var(--font, system-ui, sans-serif); letter-spacing: .04em; }
.article-heat-index-experiment .heat-print-inputs { display: none; }
.article-heat-index-experiment .heat-result-value { display: flex; align-items: baseline; gap: .35rem; margin: .1rem 0 .35rem; color: var(--heat-purple); font: 700 1.15rem/1.1 var(--font, system-ui, sans-serif); }
.heat-result-value strong { font-size: clamp(2.6rem, 8cqi, 3.65rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.article-heat-index-experiment .heat-difference { margin: 0; font: 650 .83rem/1.5 var(--font, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.heat-chart { margin-top: 1.2rem; }
.heat-chart-heading { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; color: var(--heat-muted); font-size: .68rem; }
.heat-plot-row + .heat-plot-row { margin-top: 1.1rem; }
.heat-row-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; margin-bottom: .2rem; font-size: .76rem; }
.heat-row-label > span { display: flex; align-items: center; gap: .4rem; }
.heat-row-label strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.heat-key-square, .heat-key-circle { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; background: var(--heat-red); }
.heat-key-circle { border-radius: 50%; background: var(--heat-purple); }
.heat-rail { position: relative; height: 30px; margin-inline: 9px; }
.heat-rail::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--heat-line), var(--heat-line)) center / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--heat-line) 0 1px, transparent 1px calc(100% / 3)); border-right: 1px solid var(--heat-line); opacity: .6; }
.heat-marker { position: absolute; top: 50%; display: block; width: 14px; height: 14px; transform: translate(-50%, -50%); border: 2px solid var(--heat-paper); box-shadow: 0 0 0 1px var(--heat-red); background: var(--heat-red); }
.heat-marker-index { width: 16px; height: 16px; border-radius: 50%; background: var(--heat-purple); box-shadow: 0 0 0 1px var(--heat-purple); }
.heat-envelope { position: absolute; top: 50%; height: 13px; transform: translateY(-50%); border-inline: 2px solid var(--heat-purple); }
.heat-envelope::before { content: ""; position: absolute; top: 5px; width: 100%; border-top: 2px solid var(--heat-purple); }
.heat-axis { display: flex; justify-content: space-between; margin-inline: 9px; color: var(--heat-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.heat-axis span { width: 0; overflow: visible; text-align: center; text-indent: -.5em; white-space: nowrap; }
.article-heat-index-experiment .heat-scale-note { margin: .55rem 0 0; color: var(--heat-muted); font: .68rem/1.5 var(--font, system-ui, sans-serif); }
.heat-sensitivity { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line, #d6cfc4); }
.heat-sensitivity-toggle { display: flex; align-items: center; gap: .7rem; min-height: 44px; font-size: .84rem; font-weight: 650; cursor: pointer; }
.heat-sensitivity-toggle input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--heat-purple); }
.heat-sensitivity-toggle small { display: block; margin-top: .1rem; color: var(--heat-muted); font-size: .73rem; font-weight: 400; }
.heat-sensitivity-result { margin-top: .75rem; padding: .8rem 1rem; border-left: 2px solid var(--heat-purple); background: color-mix(in srgb, var(--heat-purple) 5%, var(--heat-paper)); }
.article-heat-index-experiment .heat-sensitivity-result p { margin: .25rem 0; font: .78rem/1.6 var(--font, system-ui, sans-serif); }
.heat-sensitivity-result strong { color: var(--heat-purple); font-size: .95rem; font-variant-numeric: tabular-nums; }
.article-heat-index-experiment .heat-insight { margin: 1.15rem 0; padding: .85rem 1rem; border-radius: 6px; background: var(--bg, #f6f4ef); font: .84rem/1.65 var(--font, system-ui, sans-serif); }
.heat-model-notes { border-top: 1px solid var(--line, #d6cfc4); }
.heat-model-notes summary { min-height: 44px; padding-block: .65rem; color: var(--heat-muted); font-size: .8rem; font-weight: 650; cursor: pointer; }
.heat-model-notes > div { padding-bottom: .4rem; }
.article-heat-index-experiment .heat-model-notes p { margin: .4rem 0 .75rem; color: var(--heat-muted); font: .76rem/1.65 var(--font, system-ui, sans-serif); }
.heat-model-notes a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.article-heat-index-experiment figcaption { margin-top: .5rem; color: var(--heat-muted); font: .72rem/1.55 var(--font, system-ui, sans-serif); }
.heat-source { text-decoration: underline; text-underline-offset: .2em; }
.article-heat-index-experiment :is(button, input, summary, a):focus-visible { outline: 3px solid var(--heat-red); outline-offset: 4px; }
.article-heat-index-experiment [hidden] { display: none !important; }
.heat-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@container heat-lesson (min-width: 590px) {
  .heat-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
  .heat-output { padding-left: 1.6rem; border-left: 1px solid var(--line, #d6cfc4); }
}
@media (hover: hover) { .heat-preset-buttons button:hover { border-color: var(--heat-red); } }
@media (prefers-reduced-motion: reduce) { .article-heat-index-experiment *, .article-heat-index-experiment *::before, .article-heat-index-experiment *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) {
  .heat-control input[type="range"] { appearance: auto; -webkit-appearance: auto; }
  .heat-control input[type="range"]::-webkit-slider-thumb { appearance: auto; -webkit-appearance: auto; box-shadow: none; }
  .heat-preset-buttons button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .heat-marker, .heat-key-square, .heat-key-circle { background: CanvasText; border-color: Canvas; box-shadow: 0 0 0 1px CanvasText; forced-color-adjust: none; }
  .heat-rail::before { background: none; border-bottom: 1px solid CanvasText; opacity: 1; height: 50%; }
  .heat-envelope, .heat-envelope::before { border-color: CanvasText; }
}
@media print {
  .article-heat-index-experiment, html[data-theme="dark"] .article-heat-index-experiment { --heat-paper: #fff; --heat-ink: #111; --heat-muted: #333; --heat-red: #111; --heat-purple: #111; --heat-line: #888; container-type: normal; padding: 1rem; background: #fff; color: #111; border-color: #777; break-inside: avoid; }
  .heat-controls, .heat-sensitivity-toggle, .heat-keyboard, .heat-sr-only { display: none; }
  .heat-workspace { display: block; }
  .heat-output { padding: 0; border: 0; }
  .heat-result { padding: .5rem 1rem; background: #fff; }
  .article-heat-index-experiment .heat-print-inputs { display: block; margin: .25rem 0; color: #333; font: .78rem/1.5 var(--font, system-ui, sans-serif); }
  .heat-result-value strong { font-size: 2.6rem; }
  .heat-chart { max-width: 30rem; }
  .heat-model-notes > div { display: block; }
  .heat-model-notes summary { padding-block: .3rem; }
  .heat-insight, .heat-sensitivity-result { background: #fff; }
  .heat-source::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; }
}