
.temperature-demo{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:85px 7%;max-width:none;background:#f5f3ed;color:#24383e;align-items:start}.temperature-copy{min-width:0}.temperature-copy h2{font-size:clamp(34px,4vw,58px);line-height:1.08;letter-spacing:-.05em}.temperature-copy>p:not(.eyebrow){font-size:14px;line-height:1.7;margin:22px 0}.temperature-panel{background:#fff;padding:30px;border-radius:20px;position:sticky;top:100px;box-shadow:0 12px 32px #293c3210;min-width:0}.temperature-mode{display:flex;gap:16px;align-items:center;justify-content:center;margin-bottom:30px;font-size:13px;color:#7e8a85}.temperature-mode .selected{font-weight:600;color:#a45c2d}.temperature-panel.cooling .temperature-mode .selected{color:#237da2}#temperature-mode{width:54px;height:30px;border:0;border-radius:20px;background:#bd794c;padding:4px;cursor:pointer}#temperature-mode>span{display:block;width:22px;height:22px;background:white;border-radius:50%;transition:transform .2s}#temperature-mode[aria-checked=true]{background:#387e9b}#temperature-mode[aria-checked=true]>span{transform:translateX(24px)}.temperature-sliders label{display:flex;justify-content:space-between;gap:10px;font-size:12px;align-items:center;margin-bottom:14px}.temperature-sliders output{font-size:23px;font-weight:550;color:#a45c2d}.cooling .temperature-sliders output{color:#237da2}.temperature-sliders input{width:100%;height:24px;accent-color:#bd794c;cursor:pointer}.cooling .temperature-sliders input{accent-color:#387e9b}.temperature-demo :is(input,button):focus-visible{outline:3px solid #087d7c;outline-offset:4px}.temperature-scale{display:flex;justify-content:space-between;font-size:10px;color:#7e8a85;margin:6px 0 23px}.temperature-target{padding:17px 14px;margin-top:12px;background:#f5f6f3;border-radius:10px;border:1px solid transparent}.temperature-target.active{border-color:#cda688;background:#fcf4ec}.cooling .temperature-target.active{border-color:#a2c6d6;background:#edf6fa}.temperature-result{display:flex;align-items:center;gap:12px;background:#f5f3ed;padding:20px 16px;border-radius:12px;margin-top:25px}.temperature-result strong{font-size:15px;display:block}.temperature-result div>span{display:block;font-size:11px;margin-top:6px;color:#627477}.temperature-dot{width:9px;height:9px;border-radius:50%;background:#bd794c}.temperature-output{margin-left:auto;font-size:12px;font-weight:600}.temperature-panel #temperature-explanation{font-size:12px;line-height:1.7;margin:20px 0 0;min-height:60px}.temperature-panel .temperature-band{font-size:11px;line-height:1.6;color:#687d73;margin-top:14px}.temperature-script{border:1px solid #dedfd5;border-radius:12px;background:#fff;overflow:hidden;margin-top:25px}.temperature-script>span{display:block;font-size:9px;letter-spacing:.1em;padding:15px 18px;border-bottom:1px solid #e6e7df}.temperature-script pre{margin:0;padding:18px;font:11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#315e51;white-space:pre-wrap}.temperature-copy p.temperature-help{font-size:11px;color:#63756c;line-height:1.7}.temperature-copy p code{font-size:.95em;color:#087d7c}@media(max-width:700px){.temperature-demo{grid-template-columns:1fr;gap:35px;padding:60px 7%}.temperature-panel{position:static;padding:23px}.temperature-script pre{font-size:10px}.temperature-copy h2{font-size:38px}}@media(prefers-reduced-motion:reduce){#temperature-mode>span{transition:none}}
