.column{display:flex;flex-direction:column;gap:1rem}#input-section,#results-section,#visualization-section{background:var(--surface-color);border-radius:var(--border-radius);padding:1.25rem;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.input-group{display:flex;flex-direction:column;margin-bottom:1rem}.input-group label{font-weight:var(--font-weight-medium);font-size:.95rem;color:var(--text-primary);margin-bottom:.5rem}.slider-container{display:flex;align-items:center;gap:.75rem;background:var(--surface-muted);padding:.75rem;border-radius:var(--border-radius-small);border:1px solid var(--border-color)}.slider-value{min-width:5rem}.unit{min-width:2.5rem}.results-grid{display:grid;gap:.75rem}.result-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem;background:var(--surface-muted);border-radius:var(--border-radius-small);border:1px solid var(--border-color)}.result-item .label{font-weight:var(--font-weight-medium);color:var(--text-secondary)}.result-item span:last-child{font-weight:var(--font-weight-bold);color:var(--text-primary);text-align:right}.equation{margin-top:1rem;text-align:center;font-size:1rem;font-weight:var(--font-weight-bold);color:var(--primary-color)}.schematic{min-height:420px;border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--surface-color)}.schematic svg{display:block;width:100%;height:auto}.schematic text{font-family:var(--font-canvas);fill:var(--ink)}.schematic .datum-label,.schematic .dimension-label,.schematic .caption-label,.schematic .head-line-label,.schematic .flow-label,.schematic .delta-label,.schematic .caption-note{font-size:14px}.schematic .caption-strong{font-size:15px;font-weight:700;fill:var(--soil-edge)}.schematic .datum-label,.schematic .caption-note{fill:var(--muted)}.schematic .head-line-label,.schematic .flow-label{fill:var(--water-dark);font-weight:var(--font-weight-bold)}.schematic .delta-label{fill:var(--primary-color);font-weight:var(--font-weight-bold)}@media(max-width:768px){.slider-container{flex-wrap:wrap}.slider-value{min-width:4.5rem}.schematic{min-height:320px}.schematic .datum-label,.schematic .dimension-label,.schematic .caption-label,.schematic .head-line-label,.schematic .flow-label,.schematic .delta-label,.schematic .caption-note,.schematic .caption-strong{font-size:16px}}
