[hidden]{display:none!important}
.activity-lab{display:grid;gap:1rem;margin:1.25rem 0}
.activity-step{display:grid;gap:.65rem;border:1px solid #becfc5;background:white;border-radius:18px;padding:clamp(1rem,3vw,1.8rem)}
.activity-step :is(h3,p){margin:0}
.activity-step h3{color:#244e3c}
.activity-step label{font-weight:700;display:block}
.activity-step select,.activity-step textarea{font:inherit;background:#f7faf8;color:#17221c;border:1px solid #718879;border-radius:8px;padding:.65rem;width:100%;min-width:0;min-height:44px}
.activity-step button{justify-self:start;min-height:44px}
.activity-step :focus-visible,.report-link:focus-visible{outline:3px solid #133e90;outline-offset:3px}
.activity-pair{display:grid;gap:.45rem;grid-template-columns:minmax(0,1fr)}
.activity-pair select{margin-bottom:.45rem}
.activity-note{font-size:.9em;color:#365449}
.activity-feedback:not(:empty){border-left:4px solid #477a64;padding:.55rem .7rem;background:#eaf5ee;color:#173b2b;overflow-wrap:anywhere}
.activity-feedback:empty{margin:0}
.report-link{display:inline-block;border:1px solid #385f4b;border-radius:8px;padding:.5rem .75rem;background:white;color:#244e3c;font-weight:700}
.pedigree{width:min(100%,29rem);margin:auto;display:grid;text-align:center;padding:.75rem;border-radius:12px;background:#eef5f0}
.ped-generation{display:flex;justify-content:center;align-items:center}
.ped-generation::before{content:"";flex:0 0 30px;height:3px;background:#385f4b;order:1}
.ped-generation button:last-child{order:2}
.activity-step .person{padding:.55rem;background:white;color:#17221c;display:inline-grid;justify-items:center;gap:.2rem;max-width:10rem;border:2px solid #496a53}
.activity-step .person[aria-pressed=true]{outline:3px solid #245598;outline-offset:2px}
.ped-symbol{width:28px;height:28px;border:2px solid #284536;display:inline-block;background:white}
.ped-symbol.circle{border-radius:50%}
.ped-symbol.filled{background:#284536}
.ped-stem{width:3px;background:#385f4b;height:23px;margin:auto}
.activity-step details summary{cursor:pointer;color:#294f72;font-weight:700;min-height:32px}
.ped-generation{position:relative}
.ped-generation:has(+ [data-child]:not([hidden]))::after{content:"";position:absolute;left:calc(50% - 1.5px);top:50%;bottom:0;width:3px;background:#385f4b}
.activity-lab select{max-width:100%}

.pigment-swatches,.pigment-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.75rem}
.pigment-swatches>*,.pigment-controls fieldset{border:1px solid #becfc5;border-radius:10px;padding:.65rem;min-width:0}
.pigment-controls legend{font-weight:700;color:#244e3c}
.pigment-controls select{margin-bottom:.5rem}
.pigment-swatch{display:grid;gap:.3rem}
.pigment-color{display:block;height:2.25rem;border:1px solid #473931;border-radius:5px}
.pigment-figure{margin:0;padding:.85rem;background:#f3f7f4;border-radius:10px}
.pigment-figure figcaption{font-weight:700;margin-bottom:.5rem}
.pigment-gene+.pigment-gene{border-top:1px solid #becfc5;margin-top:.4rem;padding-top:.4rem}
.pigment-bar-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(2rem,1.3fr) minmax(0,1fr);gap:.4rem;align-items:center;padding:.2rem 0;overflow-wrap:anywhere}
.pigment-track{height:.9rem;background:#e0e8e3;border:1px solid #718879;border-radius:3px}
.pigment-bar[data-level="1"]{display:block;height:100%;background:#345b51}
.pigment-comparison:not([hidden]){background:#eef5f0;border-left:4px solid #477a64;padding:.75rem;display:grid;gap:.6rem}

.pigment-trials{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:.8rem}
.pigment-trial{display:grid;align-content:start;gap:.55rem;padding:.75rem;border:1px solid #becfc5;border-radius:10px;background:#f3f7f4;min-width:0}
.pigment-trial h4{margin:0}
.pigment-trial-table{border-collapse:collapse;width:100%;table-layout:fixed;margin-bottom:.55rem}
.pigment-trial-table :is(th,td){text-align:left;padding:.3rem;border-bottom:1px solid #becfc5;overflow-wrap:anywhere}
.pigment-trial-table .pigment-track{display:block;margin-bottom:.2rem}
.pigment-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.activity-step :is(#hair-comparison-answer,#hair-reasoning){color:#000}

.blood-table-scroll{overflow-x:auto}
.blood-table{width:100%;border-collapse:collapse;table-layout:fixed}
.blood-table caption{font-weight:700;text-align:left;padding:.3rem 0 .6rem}
.blood-table :is(td,th){padding:.5rem;border:1px solid #becfc5;vertical-align:top;overflow-wrap:anywhere}
.blood-table th{background:#eef5f0;text-align:left;color:#244e3c}
.abo-square{min-width:335px}
.abo-square th:first-child{width:22%}
.abo-square select{margin:.2rem 0 .5rem}
.blood-donor-table th:first-child{width:19%}
.blood-test-buttons{display:flex;flex-wrap:wrap;gap:.5rem}
.abo-cell-diagram{display:grid;justify-items:start;gap:.3rem;margin:.35rem 0}
.abo-cell{display:flex;align-items:center;justify-content:center;gap:.15rem;width:4.15rem;height:2.55rem;border:2px solid #8d3337;border-radius:50%;background:#fac7c2;box-shadow:inset 0 0 0 .35rem #e88e88}
.abo-marker{display:grid;place-items:center;width:1.2rem;height:1.2rem;font-weight:700;font-size:.78rem;border-radius:4px;background:#184e6c;color:white}
.abo-marker[data-marker="B"]{border-radius:50%;background:#58407a}
.abo-attached{font-weight:700;color:#184e6c}
.activity-step textarea.blood-answer{color:#000}
.abo-attached{margin-left:.8rem;margin-bottom:-.35rem}
.abo-cell{position:relative;margin-top:.35rem}
.abo-marker{position:absolute;top:-.45rem;left:.55rem}
.abo-marker[data-marker="B"]{left:2.15rem}

.vision-settings{display:grid;gap:.35rem;scroll-margin-top:9rem}
.vision-settings label{display:flex;align-items:center;gap:.65rem;min-height:44px}
.vision-settings input{inline-size:1.25rem;block-size:1.25rem;flex:none;accent-color:#385f4b}
.vision-figure{margin:0;padding:.75rem;border:1px solid #becfc5;border-radius:12px;background:white}
.vision-figure figcaption{font-weight:700}
.vision-plot{display:block;width:100%;max-width:38rem;margin-inline:auto}
.vision-axis{font-family:inherit;font-size:14px;fill:#23372a}
.vision-direct{font-weight:700}
.vision-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1rem}
.vision-legend span{display:inline-flex;align-items:center;gap:.35rem}
.vision-legend i{display:inline-block;width:1.7rem;border-top:4px solid var(--series-color)}
.vision-legend .vision-dashed{border-top-style:dashed}
.activity-step textarea.vision-answer{color:#000}