@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400&display=swap');

:root {
  --ink: #172018;
  --muted: #6e746d;
  --line: #d9ddd4;
  --paper: #f3f1e9;
  --panel: #fbfaf5;
  --green: #174f3c;
  --lime: #cbf43c;
  --orange: #ff6038;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; }
button, input { font: inherit; }
.app-shell { max-width: 1480px; margin: auto; padding: 50px 38px 38px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 35px; }
.eyebrow, .section-heading p, .result-topline, .energy-meter span { margin: 0 0 13px; font: 500 11px DM Mono, monospace; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(45px, 5.2vw, 76px); line-height: .88; letter-spacing: -.065em; font-weight: 600; }
h1 em { color: var(--green); font: 400 1.03em Newsreader, serif; }
.intro { max-width: 370px; margin: 0 0 4px; color: var(--muted); line-height: 1.65; font-size: 14px; }
.workspace { display: grid; grid-template-columns: 1.05fr 1.05fr .9fr; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 60px rgba(28, 35, 27, .07); }
.panel { padding: 34px 32px 31px; border-right: 1px solid var(--line); }
.section-heading { display: flex; gap: 18px; align-items: start; margin-bottom: 29px; }
.section-heading > span { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--ink); border-radius: 50%; font: 500 11px DM Mono, monospace; }
.section-heading p { margin: 0 0 3px; color: var(--green); }
h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.field-grid, .compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field-grid > label, .compact-grid > label { display: block; padding: 12px 14px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.2; }
.field-grid label:focus-within, .compact-grid label:focus-within { border-color: var(--green); }
.field-grid label span, .compact-grid label span { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; color: var(--ink); font-size: 12px; white-space: nowrap; }
input[type="number"], select { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: 500 19px DM Mono, monospace; }
select { cursor: pointer; }
.wide { grid-column: 1 / -1; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field, .toggle-field { display: flex; align-items: center; gap: 4px; }
.choice-field { margin-top: 19px; }
legend { float: left; margin-right: auto; color: var(--muted); font-size: 12px; line-height: 32px; }
input[type="radio"] { position: absolute; opacity: 0; }
.choice-field label span, .toggle-field label span { display: block; min-width: 59px; padding: 8px 13px; border: 1px solid var(--line); text-align: center; font: 500 11px DM Mono, monospace; cursor: pointer; }
input[type="radio"]:checked + span { border-color: var(--green); color: white; background: var(--green); }
.slider-field { margin: 3px 0 27px; }
.slider-field > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.slider-field label { color: var(--muted); font-size: 12px; }
.slider-field output { font: 500 20px DM Mono, monospace; }
input[type="range"] { width: 100%; height: 4px; margin: 22px 0 8px; border-radius: 0; appearance: none; background: linear-gradient(90deg, var(--green) var(--progress), var(--line) var(--progress)); }
input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; border: 4px solid var(--panel); border-radius: 50%; appearance: none; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); cursor: pointer; }
.scale { display: flex; justify-content: space-between; color: #92968f; font: 400 9px DM Mono, monospace; }
.compact-grid { margin-bottom: 28px; }
.rain-field { margin-bottom: 25px; }
.rain-field legend { float: none; margin: 0 0 9px; line-height: normal; }
.rain-options { display: grid; grid-template-columns: repeat(4, 1fr); }
.rain-options label span { display: grid; place-items: center; min-height: 45px; padding: 7px 5px; border: 1px solid var(--line); border-right: 0; text-align: center; font: 500 9px/1.25 DM Mono, monospace; cursor: pointer; }
.rain-options label:last-child span { border-right: 1px solid var(--line); }
.lower-fields { align-items: stretch; margin-bottom: 0; }
.toggle-field { padding: 7px 9px 7px 13px; border: 1px solid var(--line); }
.toggle-field legend { line-height: 45px; }
.toggle-field label span { min-width: 43px; padding: 8px 6px; }
.result-panel { display: flex; flex-direction: column; min-width: 0; padding: 35px 32px 28px; color: white; background: var(--green); }
.result-topline { display: flex; align-items: center; gap: 10px; color: #ccdbd4; }
.result-topline i { flex: 1; height: 1px; background: rgba(255,255,255,.25); }
.range-value { display: flex; align-items: baseline; gap: 10px; margin-top: 36px; }
.range-value strong { font: 500 clamp(74px, 7.3vw, 112px)/.8 DM Mono, monospace; letter-spacing: -.1em; }
.range-value span { color: var(--lime); font: 500 24px DM Mono, monospace; }
.result-panel > p { margin: 16px 0 0; color: #c3d0ca; font-size: 12px; }
.energy-meter { margin: 45px 0 27px; }
.energy-meter > div:first-child { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.energy-meter span { margin: 0; color: #b7c8bf; }
.energy-meter strong { font: 500 13px DM Mono, monospace; }
.meter-track { height: 8px; margin-top: 12px; background: rgba(255,255,255,.14); }
.meter-track i { display: block; width: 0; height: 100%; background: var(--lime); transition: width .35s ease; }
.result-details { margin: 0; border-top: 1px solid rgba(255,255,255,.17); }
.result-details div { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.17); font-size: 11px; }
.result-details dt { color: #b7c8bf; }
.result-details dd { margin: 0; font: 500 11px DM Mono, monospace; }
.result-panel .result-note { margin-top: auto; padding-top: 22px; font-size: 9px; line-height: 1.5; }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr 1fr; }
  .conditions-panel { border-right: 0; }
  .result-panel { grid-column: 1 / -1; min-height: 480px; }
}
@media (max-width: 680px) {
  .app-shell { padding: 28px 16px 16px; }
  .hero { display: block; }
  .intro { margin-top: 25px; }
  .workspace { display: block; }
  .panel { padding: 28px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .field-grid, .compact-grid { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .result-panel { min-height: 500px; padding: 30px 22px; }
  .range-value strong { font-size: 88px; }
  .rain-options { grid-template-columns: 1fr 1fr; }
  .rain-options label:nth-child(2) span { border-right: 1px solid var(--line); }
  .rain-options label:nth-child(-n+2) span { border-bottom: 0; }
}