.mwh-hcw {
  --mwh-hcw-teal: #134558;
  --mwh-hcw-deep: #0c3544;
  --mwh-hcw-orange: #f29a3f;
  --mwh-hcw-cream: #f3eee4;
  --mwh-hcw-ink: #21424c;
  --mwh-hcw-fan-duration: 1.1s;
  --mwh-hcw-pulse-duration: 1.3s;
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  border: 1px solid #d8e1dc;
  border-radius: 18px;
  overflow: hidden;
  background: var(--mwh-hcw-cream);
  color: var(--mwh-hcw-ink);
  font-family: inherit;
  line-height: 1.5;
  box-shadow: 0 18px 45px rgba(19, 69, 88, .09);
}

.mwh-hcw *, .mwh-hcw *::before, .mwh-hcw *::after { box-sizing: border-box; }
.mwh-hcw h2, .mwh-hcw h3, .mwh-hcw p { margin: 0; }

.mwh-hcw__header {
  padding: clamp(25px, 4vw, 50px);
  background: linear-gradient(115deg, var(--mwh-hcw-deep), var(--mwh-hcw-teal));
  color: #fffaf2;
}
.mwh-hcw__eyebrow {
  margin-bottom: 9px !important;
  color: var(--mwh-hcw-orange);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .13em;
}
.mwh-hcw__header h2 {
  color: #fffaf2;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.mwh-hcw__header > p:last-child {
  max-width: 850px;
  margin-top: 14px;
  color: #dce8e8;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.mwh-hcw__body {
  display: grid;
  grid-template-columns: minmax(290px, .85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 2.5vw, 36px);
  padding: clamp(20px, 3.4vw, 42px);
}
.mwh-hcw__controls,
.mwh-hcw__visual,
.mwh-hcw__chart-wrap { min-width: 0; }
.mwh-hcw__controls {
  display: flex;
  flex-direction: column;
  gap: 27px;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 14px;
  background: #fffaf2;
}
.mwh-hcw__control-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.mwh-hcw__control label {
  color: var(--mwh-hcw-teal);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
}
.mwh-hcw__control output {
  flex-shrink: 0;
  color: var(--mwh-hcw-teal);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mwh-hcw__control input[type="range"] {
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.mwh-hcw__control input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border-radius: 10px;
  background: #c6d7d4;
}
.mwh-hcw__control input[type="range"]::-moz-range-track {
  height: 9px;
  border-radius: 10px;
  background: #c6d7d4;
}
.mwh-hcw__control input[type="range"]::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  margin-top: -8px;
  border: 4px solid #fffaf2;
  border-radius: 50%;
  background: var(--mwh-hcw-orange);
  box-shadow: 0 0 0 2px var(--mwh-hcw-teal);
  appearance: none;
  -webkit-appearance: none;
}
.mwh-hcw__control input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 4px solid #fffaf2;
  border-radius: 50%;
  background: var(--mwh-hcw-orange);
  box-shadow: 0 0 0 2px var(--mwh-hcw-teal);
}
.mwh-hcw__endpoints {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  color: #586d73;
  font-size: .82rem;
}
.mwh-hcw__help { margin-top: 12px !important; color: #546b70; font-size: .84rem; }
.mwh-hcw__reset {
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 17px;
  border: 2px solid var(--mwh-hcw-teal);
  border-radius: 8px;
  background: transparent;
  color: var(--mwh-hcw-teal);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}
.mwh-hcw__reset:hover { background: var(--mwh-hcw-teal); color: #fffaf2; }
.mwh-hcw :focus-visible { outline: 3px solid var(--mwh-hcw-orange); outline-offset: 4px; }

.mwh-hcw__visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px clamp(17px, 2.8vw, 34px) 22px;
  border-radius: 14px;
  background: #e2edea;
}
.mwh-hcw__scene { display: block; width: 100%; height: auto; max-height: 300px; }
.mwh-hcw__scene text { fill: var(--mwh-hcw-teal); font-size: 15px; font-weight: 800; letter-spacing: .12em; }
.mwh-hcw__ground { fill: none; stroke: #9dbcb8; stroke-width: 3; }
.mwh-hcw__house-roof { fill: none; stroke: var(--mwh-hcw-teal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10; }
.mwh-hcw__house { fill: #fffaf2; stroke: var(--mwh-hcw-teal); stroke-width: 6; }
.mwh-hcw__window { fill: #b3d7d3; stroke: var(--mwh-hcw-teal); stroke-width: 5; }
.mwh-hcw__radiator { fill: none; stroke: var(--mwh-hcw-orange); stroke-width: 5; }
.mwh-hcw__heat-path { fill: none; stroke: var(--mwh-hcw-orange); stroke-width: 8; stroke-dasharray: 15 10; animation: mwh-hcw-flow 1.1s linear infinite; }
.mwh-hcw__unit { fill: #f8fbf8; stroke: var(--mwh-hcw-teal); stroke-width: 7; }
.mwh-hcw__fan-ring { fill: #d7e7e4; stroke: var(--mwh-hcw-teal); stroke-width: 5; }
.mwh-hcw__fan { fill: var(--mwh-hcw-teal); transform-origin: 107px 172px; animation: mwh-hcw-spin var(--mwh-hcw-fan-duration) linear infinite; }
.mwh-hcw__fan-hub { fill: var(--mwh-hcw-orange); }
.mwh-hcw__compressor-case { fill: #c1d9d5; stroke: var(--mwh-hcw-teal); stroke-width: 3; }
.mwh-hcw__compressor-core { fill: var(--mwh-hcw-orange); transform-origin: 194px 172px; animation: mwh-hcw-pulse var(--mwh-hcw-pulse-duration) ease-in-out infinite alternate; }

.mwh-hcw__readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mwh-hcw__readout {
  min-width: 0;
  padding: 15px 18px;
  border-radius: 10px;
  background: #fffaf2;
}
.mwh-hcw__readout > span:first-child { display: block; color: #526870; font-size: .85rem; line-height: 1.3; }
.mwh-hcw__readout output,
.mwh-hcw__readout strong { display: block; margin-top: 5px; color: var(--mwh-hcw-teal); font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.mwh-hcw__effort-track { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 8px; background: #d5e2de; }
.mwh-hcw__effort-track span { display: block; height: 100%; width: 45%; border-radius: inherit; background: var(--mwh-hcw-orange); transition: width .28s ease; }

.mwh-hcw__chart-wrap {
  margin: 0 clamp(20px, 3.4vw, 42px) clamp(20px, 3.4vw, 42px);
  padding: clamp(20px, 3vw, 36px);
  border-radius: 14px;
  background: #fffaf2;
}
.mwh-hcw__chart-head h3 { color: var(--mwh-hcw-teal); font-size: clamp(1.4rem, 2.4vw, 2rem); }
.mwh-hcw__chart-head p { margin-top: 5px; color: #51666c; font-size: 1rem; }
.mwh-hcw__chart { display: block; width: 100%; max-height: 380px; margin: 9px auto 0; overflow: visible; }
.mwh-hcw__grid { fill: none; stroke: #dce8e5; stroke-width: 2; }
.mwh-hcw__axes { fill: none; stroke: var(--mwh-hcw-teal); stroke-width: 3; }
.mwh-hcw__chart-label { fill: var(--mwh-hcw-teal); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-anchor: middle; }
.mwh-hcw__chart-label:first-of-type { text-anchor: start; }
.mwh-hcw__tick { fill: #536b70; font-size: 15px; text-anchor: middle; }
.mwh-hcw__curve { fill: none; stroke: var(--mwh-hcw-teal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.mwh-hcw__guide { fill: none; stroke: var(--mwh-hcw-orange); stroke-dasharray: 8 6; stroke-width: 2; }
.mwh-hcw__point-halo { fill: #f29a3f55; }
.mwh-hcw__point { fill: var(--mwh-hcw-orange); stroke: #fffaf2; stroke-width: 3; }

.mwh-hcw__footer { padding: 25px clamp(20px, 3.4vw, 42px); background: var(--mwh-hcw-teal); color: #fffaf2; }
.mwh-hcw__footer p { max-width: 1000px; font-size: 1.04rem; line-height: 1.6; }
.mwh-hcw__footer small { display: block; max-width: 1050px; margin-top: 10px; color: #c5d9db; font-size: .82rem; line-height: 1.55; }
.mwh-hcw__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes mwh-hcw-spin { to { transform: rotate(360deg); } }
@keyframes mwh-hcw-flow { to { stroke-dashoffset: -25; } }
@keyframes mwh-hcw-pulse { to { transform: scaleY(.64); } }

@media (max-width: 760px) {
  .mwh-hcw__body { grid-template-columns: 1fr; }
  .mwh-hcw__scene { max-height: 250px; }
  .mwh-hcw__chart-wrap { overflow-x: auto; }
  .mwh-hcw__chart { min-width: 560px; }
}
@media (max-width: 470px) {
  .mwh-hcw { border-radius: 0; }
  .mwh-hcw__control-heading { align-items: flex-start; }
  .mwh-hcw__readouts { grid-template-columns: 1fr; }
  .mwh-hcw__chart-label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mwh-hcw__fan, .mwh-hcw__heat-path, .mwh-hcw__compressor-core { animation: none; }
  .mwh-hcw__effort-track span { transition: none; }
}