* { box-sizing: border-box; }
button, input { font: inherit; }
a { color: inherit; }
#page-title { text-wrap: balance; }
:focus-visible { outline: 3px solid #245b49; outline-offset: 3px; }
h2 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.48rem); line-height: 1.4; }
.tool-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid #9fa79f; background: #fbfaf6; }
.calculator-panel, .visual-panel { min-width: 0; padding: 24px; }
.calculator-panel { border-right: 1px solid #cfd3cc; }
.section-kicker { margin: 0 0 5px; color: #245b49; font-size: .78rem; font-weight: 750; }
.field { margin-top: 17px; }
.field label { display: block; font-weight: 700; }
.field input { width: 100%; min-width: 0; min-height: 44px; padding: 9px; border: 1px solid #9fa79f; background: #fff; }
.field input[type=range] { padding: 0; accent-color: #245b49; }
.field input[aria-invalid=true] { border-color: #9b2f2f; }
.field-help, figcaption { font-size: .8rem; color: #687069; line-height: 1.6; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.button { min-height: 44px; padding: 9px 13px; border: 1px solid #245b49; border-radius: 2px; font-weight: 700; cursor: pointer; }
.button-primary { background: #245b49; color: white; }
.button-secondary { background: transparent; color: #245b49; }
.button:hover { border-color: #222824; }
.form-error { color: #9b2f2f; background: #fff3f3; padding: 10px; }
.result-box { margin-top: 20px; padding: 17px; border: 1px solid #cfd3cc; background: #f5f4ef; }
.result-box[data-state=ready] { border-color: #245b49; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metrics-grid div { border: 1px solid #cfd3cc; padding: 9px; min-width: 0; }
.metrics-grid dt { font-size: .76rem; color: #687069; }
.metrics-grid dd { margin: 3px 0 0; font-size: 1rem; font-weight: 700; }
.metrics-grid dd, p, th, td { overflow-wrap: anywhere; }
.result-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .82rem; }
.result-table caption { text-align: left; font-weight: 700; margin-bottom: 7px; }
.result-table td, .result-table th { padding: 8px 5px; border: 1px solid #cfd3cc; text-align: left; }
.result-table th { background: #e2ebe5; }
.visual-panel { background: #f8f8f4; }
figure { margin: 12px 0; }
#distribution-svg { display: block; width: 100%; height: auto; border: 1px solid #cfd3cc; background: #fbfaf6; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; list-style: none; font-size: .83rem; }
.swatch { display: inline-block; width: 18px; height: 10px; margin-right: 5px; }
.aa { background: #245b49; }.hetero { background: #a66328; }.recessive { background: #49688a; }
.highlight { padding: 12px; border-left: 3px solid #245b49; background: #e2ebe5; font-size: .9rem; }
.content-section { margin-top: 28px; padding-top: 26px; border-top: 1px solid #cfd3cc; }
.formula-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 15px; }
.formula-list article { padding: 13px; border: 1px solid #cfd3cc; min-width: 0; }
.formula-list strong, .formula-list span { display: block; overflow-wrap: anywhere; }
.formula-list span { font-size: .8rem; color: #687069; margin-top: 6px; }
@media(max-width:900px) { .tool-shell { grid-template-columns: 1fr; }.calculator-panel { border-right: 0; border-bottom: 1px solid #cfd3cc; } }
@media(max-width:620px) { .calculator-panel, .visual-panel { padding: 15px; }.formula-list { grid-template-columns: 1fr; }.form-actions .button { flex: 1 1 120px; }.result-box { padding: 12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }