.high-page { --paper: #eff3ef; --line: #cbdcd3; --green: #19554c; --mint: #e1eee6; }
.high-page .hero { background: #193d3b; }
.high-page .hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
.high-page .hero-photo img { object-position: center; }
.high-page .activity { background: #fcfdf9; }
.high-page h3 { margin-bottom: .4rem; }
.high-page select, .high-page input[type="number"], .sequence-input { min-height: 2.65rem; max-width: 100%; padding: .45rem .6rem; border: 1px solid #a7bfb0; border-radius: .55rem; color: var(--ink); background: white; }
.high-page details summary { cursor: pointer; font-weight: 750; }
.high-page details p { margin-top: .45rem; }
#osm-check, #density-check { margin-top: .65rem; }
.osmosis-figure, .division-figure { padding: .65rem; border-radius: .85rem; background: #edf4ed; }
.solutions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: .65rem; overflow: hidden; }
.solution { display: grid; align-content: center; gap: .15rem; min-height: 5.25rem; padding: .45rem; text-align: center; background: #cce6e5; }
.solution + .solution { border-left: 3px dashed #789e99; background: #dcebd2; }
.solution span { font-variant-numeric: tabular-nums; }
.direction { min-height: 2.6rem; margin-top: .4rem; text-align: center; font-size: 1.05rem; font-weight: 800; color: #235c53; }
.slider-label { display: block; font-weight: 720; }
.slider-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.slider-row input { width: min(13rem,100%); accent-color: #276854; }
.slider-row output { font-variant-numeric: tabular-nums; font-weight: 750; }
.division-figure svg { display: block; width: 100%; height: auto; }
.division-numbers { display: grid; grid-template-columns: 1fr 1.3fr; gap: .55rem; margin: .65rem 0 0; }
.division-numbers div { padding: .55rem; border: 1px solid var(--line); border-radius: .55rem; }
.division-numbers dt { font-size: .88rem; font-weight: 720; }
.division-numbers dd { margin: 0; color: #235c53; font-size: 1.4rem; font-weight: 820; }
.gene-controls { display: grid; gap: .35rem; }
.sequence-input { width: 100%; max-width: 41rem; font: 1rem/1.5 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .03em; }
.sequence-output { display: block; overflow-wrap: anywhere; color: #25594d; font: 750 1.08rem/1.5 ui-monospace, monospace; }
.codons { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: .55rem 0 0; list-style: none; }
.codons li { display: grid; min-width: 5.6rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: .55rem; background: white; }
.codons li strong { font-family: ui-monospace, monospace; }
.codons .stop { background: #f7ebd8; }
.hormone-picker { margin-top: .6rem; }
.response-box { margin: 0; }
.response-box ol { margin: .3rem 0 0; padding-inline-start: 1.2rem; }
.response-box li + li { margin-top: .3rem; }
.high-page table { width: 100%; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.high-page caption { padding: .5rem; background: #edf3ea; font-weight: 750; }
.high-page th, .high-page td { padding: .5rem .35rem; border-bottom: 1px solid #d7e2d6; }
.high-page thead th { background: #dceae1; }
.high-page tbody tr:last-child > * { border-bottom: 0; }
.eco-figure figcaption { margin-top: .55rem; }
.density-controls label { min-width: 0; max-width: 10rem; }
.conclusion-choices { flex-direction: column; align-items: stretch; }
.conclusion-choices button { text-align: left; justify-content: start; }