.primary-page { --paper: #f4f4ec; --line: #d6e0d5; }
.primary-page .hero { background: #183e38; }
.primary-page .hero-photo img { object-position: center 47%; }
.grade-mode { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; margin: .25rem 0 1rem; padding: .55rem .8rem .7rem; border: 1px solid var(--line); border-radius: .8rem; background: #fffef8; }
.grade-mode legend { padding-inline: .4rem; font-weight: 750; }
.grade-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.grade-options label { display: flex; align-items: center; gap: .3rem; min-height: 2.65rem; padding: .32rem .6rem; border: 1px solid #aac2b2; border-radius: .55rem; font-weight: 700; cursor: pointer; }
.grade-options label:has(input:checked) { border-color: #398366; background: var(--mint); }
.grade-options input { accent-color: var(--green); }
.selector-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .8rem; margin-bottom: .8rem; font-weight: 700; }
.primary-page select { min-height: 2.65rem; padding: .42rem .65rem; border: 1px solid #aac2b2; border-radius: .55rem; background: #fff; color: var(--ink); }
.photo-pool, .sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.photo-pool[data-slots="3"], .sequence[data-slots="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-pool .choice { align-items: center; }
.photo-pool .choice[aria-disabled="true"] { opacity: .56; }
.photo-pool .choice span { font-size: .86rem; }
.sequence { margin: .48rem 0 0; padding: 0; list-style: none; }
.sequence li { min-width: 0; border: 1px dashed #91ac99; border-radius: .7rem; background: #edf3e8; }
.sequence li > button { display: grid; align-content: center; gap: .3rem; width: 100%; min-height: 3.5rem; height: 100%; padding: .35rem; border: 0; border-radius: .65rem; background: transparent; color: var(--ink); font-weight: 740; }
.sequence li > button:disabled { cursor: default; }
.sequence img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; }
.sequence .slot-number { color: #365c47; font-size: .81rem; }
.sequence .slot-name { font-size: .83rem; }
.subheading { margin-top: 1rem; }
.result { margin-top: .65rem; }
.primary-page button:disabled { opacity: .67; cursor: default; }
.answer-box { margin-top: .8rem; padding: .85rem; border-radius: .75rem; background: #eef4e9; }
.answer-box ol { margin: .45rem 0 0; padding-left: 1.25rem; }
.answer-box li + li { margin-top: .35rem; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.compare figure, .habitat-grid figure { overflow: hidden; border-radius: .65rem; background: #edf3e8; }
.compare img, .habitat-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.compare figcaption, .habitat-grid figcaption { padding: .35rem .6rem; font-weight: 700; }
.lab-grid, .body-grid, .habitat-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1.05rem; align-items: start; }
.lab-seedlings > p { grid-column: 1 / -1; }
.lab-controls label { display: flex; align-items: center; justify-content: space-between; gap: .55rem; margin-bottom: .55rem; font-weight: 700; }
.lab-controls select { min-width: 7rem; }
.body-figure { display: grid; justify-items: center; padding: .75rem; border-radius: .75rem; background: #f6efe0; }
.body-map { position: relative; width: min(16rem, 100%); }
.body-map svg { display: block; width: 100%; }
.organ-shape { visibility: hidden; }
.organ-shape.placed { visibility: visible; }
.body-spot { position: absolute; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; transform: translate(-50%, -50%); border: 2px solid #226347; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 800; }
.body-spot[data-zone="lungs"] { left: 37%; top: 40%; }
.body-spot[data-zone="heart"] { left: 53%; top: 49%; }
.body-spot[data-zone="stomach"] { left: 62%; top: 62%; }
.body-spot.placed { opacity: 1; background: #e6f3e6; width: 1.75rem; height: 1.75rem; font-size: .8rem; }
.organ-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.organ-picker button[aria-pressed="true"] { border-color: #277b58; background: #d4ead9; }
.organ-picker button:disabled { opacity: .73; }
.quiz-question { margin-bottom: .5rem; font-weight: 730; }
.quiz-answers { display: grid; gap: .42rem; }
.quiz-answers .button { justify-content: flex-start; text-align: left; font-weight: 680; }
.quiz-answers .picked-right { border-color: #277b58; background: #deefdc; }
.quiz-answers .picked-wrong { border-color: #ae792e; background: #fff0cd; }
.quiz-status { margin: .35rem 0 .65rem; }
.detective-photos { max-width: 44rem; margin-bottom: .7rem; }
#job-next { margin-top: .25rem; }
@media (max-width: 45rem) {
  .lab-grid, .body-grid, .habitat-grid { grid-template-columns: 1fr; }
  .photo-pool, .sequence, .photo-pool[data-slots="3"], .sequence[data-slots="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.photo-pool .choice[aria-pressed="true"] { border-color: #277b58; background: #e4f2df; }