:root {
  color-scheme: light;
  --ink: #243b31;
  --muted: #5d7062;
  --forest: #285746;
  --forest-2: #42765a;
  --leaf: #dbe8cb;
  --leaf-2: #edf3e4;
  --paper: #fffdf5;
  --paper-2: #f7f3e6;
  --cream: #f3edda;
  --red: #b84a35;
  --gold: #d59c42;
  --line: #d9dfd0;
  --shadow: 0 15px 36px rgba(38, 66, 47, .09);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #eef2e7;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: #eef2e7; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #e8efdf 0, #f4f2e8 440px, #f3f4ed 100%); }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: #2e674c; text-underline-offset: .2em; font-weight: 700; }
a:hover { color: #184733; }
:focus-visible { outline: 3px solid #8a5512; outline-offset: 3px; }
.skip-link { position: absolute; z-index: 5; top: -80px; left: 12px; background: var(--paper); padding: 12px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.site-head { width: min(1320px, calc(100% - 40px)); margin: 0 auto; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; min-width: max-content; }
.brand svg { width: 42px; height: 42px; fill: #85a96f; stroke: #446d4a; stroke-width: 2.5; stroke-linecap: round; }
.brand span { display: grid; gap: 3px; }
.brand strong { font-size: 20px; letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .12em; font-weight: 800; }
.head-progress { width: min(250px, 23vw); display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
progress { display: block; width: 100%; height: 9px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: #dbe3d3; }
progress::-webkit-progress-bar { background: #dbe3d3; border-radius: 99px; }
progress::-webkit-progress-value { background: #4c815e; border-radius: 99px; transition: width .2s ease; }
progress::-moz-progress-bar { background: #4c815e; border-radius: 99px; }
.button { min-height: 46px; padding: 0 16px; border: 1px solid transparent; border-radius: 13px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; cursor: pointer; font-weight: 800; text-decoration: none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .5; }
.button.primary { background: var(--forest); color: #fffdf5; box-shadow: 0 4px 0 #1f4437; }
.button.primary:hover:not(:disabled) { background: #326b52; }
.button.secondary { background: #e1ebd7; border-color: #c6d6be; color: #284b39; }
.button.quiet { color: var(--forest); background: #f9fbf4; border-color: #ccd8c9; }
.button.large { min-height: 54px; padding: 0 22px; font-size: 16px; border-radius: 16px; }
.button.text-button { padding: 0; min-height: 44px; border: 0; background: none; color: #38674c; text-decoration: underline; text-underline-offset: .2em; }
.reset-button { min-width: 116px; }
.lesson-nav { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 8px 0 12px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.nav-step { min-height: 46px; flex: 1 0 auto; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #52685a; cursor: pointer; font-size: 13px; font-weight: 800; white-space: nowrap; }
.nav-step span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #dbe5d3; color: #385946; font-size: 10px; }
.nav-step.current { background: #fffdf5; color: var(--forest); border-color: #dce3d5; box-shadow: 0 4px 12px rgba(39, 70, 48, .05); }
.nav-step.done span { background: #4d805c; color: white; }
.nav-step.done::after { content: "✓"; margin-left: -6px; color: #477754; }
.simulation-tools { width: min(1320px, calc(100% - 40px)); margin: 0 auto 8px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; background: rgba(255,253,245,.78); border: 1px solid #dce3d5; border-radius: 16px; }
.simulation-tools[hidden] { display: none; }
.simulation-tools .button { min-height: 40px; }
.tools-label { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; padding: 0 8px; }
.simulation-tools .small-copy { margin-left: auto; }
main { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0 56px; }
.view[hidden] { display: none !important; }
.welcome-view { display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); align-items: center; gap: 28px 36px; }
.welcome-copy { padding: 30px 8px 20px 12px; }
.eyebrow { color: #65805f; font-size: 11px; line-height: 1.4; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); }
h1 { margin-bottom: 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5.2vw, 68px); line-height: .99; letter-spacing: -.04em; }
h2 { margin-bottom: 9px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(23px, 2.6vw, 33px); line-height: 1.08; letter-spacing: -.025em; }
h3 { margin-bottom: 2px; font-size: 16px; }
.welcome-copy h1 { max-width: 510px; }
.lede { max-width: 580px; color: #4c6255; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.welcome-actions { margin: 24px 0 14px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.welcome-actions a { font-size: 14px; }
.gentle-note { display: flex; gap: 9px; align-items: center; color: #647466; font-size: 13px; }
.leaf-dot { width: 10px; height: 10px; display: inline-block; border-radius: 75% 0 75% 0; background: #719762; transform: rotate(-25deg); }
.hero-art { position: relative; overflow: hidden; border-radius: 32px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.7); }
.hero-art svg { display: block; width: 100%; height: auto; }
.art-caption { position: absolute; right: 14px; bottom: 13px; padding: 8px 11px; border-radius: 10px; color: #3f5e46; background: rgba(255,253,245,.88); font-size: 11px; font-weight: 800; }
.welcome-lower { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-card { min-height: 96px; padding: 17px 18px 13px 52px; position: relative; background: #fffdf5; border: 1px solid #e1e6d9; border-radius: 17px; }
.mini-card strong { display: block; margin-bottom: 4px; }
.mini-card p { margin: 0; color: var(--muted); font-size: 13px; }
.mini-no { position: absolute; left: 16px; top: 16px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; background: #e5eed9; color: #3b694d; font-weight: 900; }
.onboarding { grid-column: 1 / -1; background: #e8eee0; border-radius: 14px; padding: 12px 16px; color: #445a4c; }
.onboarding summary { cursor: pointer; min-height: 28px; font-weight: 900; }
.onboarding p { margin: 10px 0 2px; line-height: 1.55; font-size: 14px; }
.activity-view { animation: arrive .22s ease-out; }
@keyframes arrive { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.activity-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 12px 2px 22px; }
.activity-intro h1 { font-size: clamp(33px, 4.1vw, 52px); margin: 5px 0 9px; }
.activity-intro p:not(.eyebrow) { max-width: 770px; margin: 0; color: #586b5b; line-height: 1.5; }
.pill { min-width: max-content; padding: 8px 12px; border-radius: 999px; background: #dce9d1; color: #3a6346; font-size: 12px; font-weight: 900; }
.activity-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); gap: 18px; align-items: start; }
.paper-card { min-width: 0; padding: clamp(17px, 2.2vw, 27px); background: var(--paper); border: 1px solid #e0e5d9; border-radius: 22px; box-shadow: 0 8px 28px rgba(40,70,48,.05); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 5px; }
.card-heading h2 { margin-top: 4px; }
.small-copy, .metric-note { color: #647365; font-size: 13px; line-height: 1.55; }
.small-copy { margin-bottom: 15px; }
.species-board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.species-card { min-width: 0; padding: 12px 13px 11px; border: 1px solid #e3e8dd; border-radius: 16px; background: #fcfcf6; }
.species-card.fox { grid-column: 1 / -1; }
.species-card-top { min-height: 40px; display: flex; align-items: center; gap: 9px; }
.species-glyph { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 12px; color: #315b43; background: #e4efd9; font-family: Georgia, serif; font-size: 22px; }
.species-card.rabbit .species-glyph, .species-card.vole .species-glyph { background: #f1e9cf; color: #816139; }
.species-card.fox .species-glyph { background: #f4e4d8; color: #9c5038; }
.species-title { min-width: 0; flex: 1; }
.species-title h3 { line-height: 1.15; }
.role-label { color: #6b7b6c; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.count-chip { padding: 5px 8px; border-radius: 99px; background: #f0f1e8; color: #607260; font-size: 10px; font-weight: 800; white-space: nowrap; }
.presence-control { display: flex; align-items: center; gap: 5px; }
.presence-control button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid #cad6c5; background: #fff; color: #315e46; cursor: pointer; font-size: 20px; font-weight: 900; line-height: 1; }
.presence-control button:hover:not(:disabled) { background: #edf4e7; }
.presence-control button:disabled { opacity: .42; cursor: not-allowed; }
.presence-control span { min-width: 29px; display: grid; justify-items: center; line-height: 1; }
.presence-control strong { font-size: 13px; }
.presence-control small { padding-top: 3px; color: #718172; font-size: 9px; }
.species-note { min-height: 36px; margin: 7px 0 6px; color: #637165; font-size: 11px; line-height: 1.35; }
.support-row { margin: 7px 0 5px; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #5c705f; }
.support-row strong { color: #2f4939; }
.meter-track { height: 9px; overflow: hidden; border-radius: 99px; background: #e8ecdf; }
.meter-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #6d995f; transition: width .2s ease; }
.meter-fill.clover { background: #a6a95e; }
.meter-fill.rabbit { background: #b78e54; }
.meter-fill.vole { background: #8d8155; }
.meter-fill.fox { background: #b86442; }
.presence-caption { margin: 5px 0 0; color: #859083; font-size: 10px; }
.controls-bottom { margin-top: 16px; padding-top: 13px; border-top: 1px dashed #d7ded1; display: grid; grid-template-columns: auto minmax(180px,1fr) auto; align-items: center; gap: 8px 12px; }
.quiz-label { grid-column: 1 / 2; color: #536656; font-size: 12px; font-weight: 800; }
.controls-bottom select { grid-column: 2 / 3; }
.controls-bottom .button.secondary { grid-column: 3 / 4; }
select, input[type="number"] { width: 100%; min-height: 46px; padding: 8px 11px; border: 1px solid #cbd6c7; border-radius: 12px; background: #fff; color: var(--ink); }
.feedback { min-height: 42px; margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: #eef4e8; color: #395844; font-size: 13px; line-height: 1.45; }
.controls-bottom .feedback { grid-column: 1 / -1; }
.flow-card { padding-bottom: 20px; }
.food-web { width: 100%; height: auto; margin: 6px 0 7px; overflow: visible; }
.food-arrow { fill: none; stroke: #597c54; stroke-width: 4; marker-end: url(#arrow); }
.light-arrow { stroke: #91a879; stroke-dasharray: 7 5; }
.web-node rect { fill: #edf2e5; stroke: #bdd0ad; stroke-width: 2; }
.web-node.eater-node rect { fill: #f3eddc; stroke: #d9c69e; }
.web-node.fox-node rect { fill: #f4e3d8; stroke: #d6a48d; }
.web-node text { text-anchor: middle; fill: #2e4938; font-weight: 900; font-size: 20px; }
.web-node .node-sub { fill: #617362; font-size: 12px; font-weight: 700; }
.relation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.relation-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 9px 11px; border-radius: 11px; background: #f3f4eb; font-size: 12px; }
.relation-list li strong { color: #3c5e47; }
.relation-list li span { color: #687769; }
.plain-caption { margin: 10px 0 0; color: #6e7b6c; font-size: 11px; }
.step-record { margin-top: 19px; padding: 21px 23px; border-radius: 20px; border: 1px solid #e0e5d8; background: rgba(255,253,245,.78); }
.step-record > div:first-child { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.step-record h2 { margin: 0 0 8px; font-size: 25px; }
.why-log { max-height: 375px; overflow: auto; margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.log-season, .log-change { border: 1px solid #e3e8df; border-radius: 13px; background: #fffefa; }
.log-season details { padding: 0 13px 11px; }
.log-season summary { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: #69806a; font-size: 11px; font-weight: 800; }
.log-season details > ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.log-season details > ul li { padding: 8px 10px; border-radius: 10px; background: #f4f6ee; display: grid; grid-template-columns: 135px 1fr; gap: 9px; color: #5b6a5c; font-size: 12px; line-height: 1.4; }
.log-season details > ul li strong { color: #34533e; }
.log-change { padding: 12px 14px; color: #596d5d; font-size: 13px; }
.log-change p { margin: 4px 0 0; }
.scenario-row { margin: 0 0 15px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.scenario-button { min-height: 66px; padding: 12px 15px; display: grid; align-content: center; gap: 4px; text-align: left; border: 1px solid #d7dfd1; border-radius: 15px; background: #fffdf5; color: #405747; cursor: pointer; }
.scenario-button span { color: #748072; font-size: 11px; }
.scenario-button.selected { border-color: #608763; box-shadow: inset 0 0 0 2px #608763; background: #f7faef; }
.scenario-button:hover { background: #f6f8ef; }
.season-pill { align-self: start; }
.weather-mark { width: 44px; height: 44px; display: grid; place-items: center; color: #c99239; background: #f8efd5; border-radius: 50%; font-size: 27px; }
.condition-control { margin: 15px 0; padding: 13px 15px; border-radius: 14px; background: #f2f5ec; }
.condition-control label, .restore-ranges label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #405946; font-size: 13px; font-weight: 900; }
.condition-control output, .restore-ranges output { color: #2c6547; font-variant-numeric: tabular-nums; }
input[type="range"] { display: block; width: 100%; height: 32px; margin: 10px 0 0; accent-color: #4c8055; cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; color: #7a867a; font-size: 10px; }
.prediction-label { display: grid; gap: 7px; margin-top: 17px; }
.prediction-label select { font-weight: 700; }
.metric-note { padding: 9px 11px; background: #f4f3e7; border-radius: 10px; }
.compact-board { grid-template-columns: 1fr; }
.compact-board .species-card { padding: 10px 12px; }
.compact-board .species-card-top { min-height: 31px; }
.compact-board .species-glyph { width: 29px; height: 29px; flex-basis: 29px; font-size: 18px; }
.compact-board .species-note { min-height: auto; margin: 3px 0 4px; }
.compare-callout { margin: 13px 0 0; padding: 13px; background: #eaf1e2; border-left: 4px solid #77956a; border-radius: 0 11px 11px 0; color: #425d48; font-size: 13px; line-height: 1.45; }
.restore-callout { margin-bottom: 16px; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid #e7dcc0; border-radius: 17px; background: #f8f0da; }
.restore-callout > span { color: #b48636; font-size: 23px; }
.restore-callout div { flex: 1; }
.restore-callout strong { color: #634e2b; }
.restore-callout p { margin: 3px 0 0; color: #79684a; font-size: 12px; }
.restore-grid { grid-template-columns: minmax(0,1.03fr) minmax(300px,.97fr); }
.restore-ranges { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.restore-ranges label { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 11px 13px; border-radius: 13px; background: #f1f5eb; }
.restore-ranges input { grid-column: 1 / -1; }
.recovery-stamp { padding: 7px 10px; border-radius: 99px; background: #f3eee0; color: #72674e; font-size: 10px; font-weight: 900; white-space: nowrap; }
.recovery-stamp.complete { color: #fff; background: #4d805c; }
.evidence-box { min-height: 108px; padding: 14px; border-radius: 14px; background: #f3f5ec; color: #526658; font-size: 13px; line-height: 1.5; }
.evidence-box p:last-child { margin-bottom: 0; }
.baseline-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-bottom: 1px solid #e7eadf; color: #647365; font-size: 12px; }
.baseline-line strong { color: #314d39; font-variant-numeric: tabular-nums; }
.summary-view { max-width: 850px; margin: 20px auto; padding: clamp(22px,4vw,42px); border: 1px solid #e1e6db; border-radius: 28px; background: #fffdf5; box-shadow: var(--shadow); text-align: center; }
.summary-view h1 { font-size: clamp(37px,5vw,57px); }
.summary-leaf { color: #7b9a68; font-size: 35px; }
.summary-view .lede { margin: 0 auto 23px; font-size: 17px; }
.summary-list { display: grid; gap: 9px; text-align: left; margin: 24px 0; }
.summary-row { padding: 14px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border: 1px solid #e4e8df; border-radius: 15px; background: #fbfcf7; }
.summary-row.is-done { background: #f0f6e9; border-color: #d4e0cb; }
.summary-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e5ebde; color: #3c6b4a; font-weight: 900; }
.summary-row strong { display: block; }
.summary-row p { margin: 3px 0 0; color: #687769; font-size: 12px; line-height: 1.4; }
.next-practice { margin: 22px 0; padding: 18px; border-radius: 16px; background: #f3f0df; text-align: left; }
.next-practice strong { display: block; margin: 4px 0 6px; font-family: Georgia,serif; font-size: 20px; }
.next-practice p { margin: 0; color: #687161; font-size: 13px; line-height: 1.5; }
.summary-actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.summary-actions a { font-size: 13px; }
.site-foot { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0 24px; border-top: 1px solid #dce2d6; display: flex; justify-content: space-between; gap: 15px; color: #748074; font-size: 11px; }
.site-foot a { font-size: 11px; }
@media (max-width: 980px) {
  .site-head { flex-wrap: wrap; padding: 13px 0; }
  .head-progress { margin-left: auto; width: 220px; }
  .welcome-view { grid-template-columns: 1fr 1fr; gap: 20px; }
  .activity-grid, .restore-grid { grid-template-columns: 1fr; }
  .flow-card .food-web { max-height: 310px; }
  .controls-bottom { grid-template-columns: minmax(140px,1fr) minmax(160px,1fr); }
  .quiz-label { grid-column: 1 / 2; }
  .controls-bottom select { grid-column: 2 / 3; }
  .controls-bottom .button.secondary { grid-column: 1 / 2; justify-self: start; }
}
@media (max-width: 650px) {
  .site-head, .lesson-nav, .simulation-tools, main, .site-foot { width: min(100% - 24px, 600px); }
  .site-head { gap: 9px; min-height: unset; }
  .brand svg { width: 34px; height: 34px; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 8px; }
  .head-progress { order: 3; width: calc(100% - 124px); margin: 2px 0 0; }
  .reset-button { min-width: 108px; padding: 0 10px; min-height: 40px; font-size: 12px; }
  .lesson-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; padding: 7px 0 9px; overflow: visible; }
  .nav-step { min-width: 0; min-height: 43px; padding: 0 8px; font-size: 11px; white-space: normal; }
  .simulation-tools { flex-wrap: wrap; gap: 7px; padding: 8px; }
  .tools-label { width: 100%; padding: 0 3px; }
  .simulation-tools .button { flex: 1; min-width: 90px; padding: 0 8px; }
  .simulation-tools .small-copy { width: 100%; margin: 2px 3px; }
  main { padding-top: 11px; }
  .welcome-view { grid-template-columns: 1fr; }
  .welcome-copy { padding: 17px 4px 4px; }
  .welcome-copy h1 { max-width: 400px; }
  .hero-art { grid-row: 2; border-radius: 23px; }
  .welcome-lower { grid-template-columns: 1fr; gap: 8px; }
  .mini-card { min-height: 76px; padding: 12px 12px 10px 50px; }
  .mini-no { top: 13px; }
  .activity-intro { align-items: start; margin: 8px 1px 15px; }
  .activity-intro h1 { font-size: 35px; }
  .activity-intro p:not(.eyebrow) { font-size: 14px; }
  .paper-card { padding: 16px; border-radius: 18px; }
  .species-board { gap: 7px; }
  .species-card { padding: 10px; }
  .species-card-top { gap: 6px; align-items: flex-start; }
  .species-glyph { width: 29px; height: 29px; flex-basis: 29px; font-size: 18px; }
  .species-title h3 { font-size: 14px; }
  .presence-control { gap: 3px; }
  .presence-control button { width: 34px; height: 38px; }
  .presence-control small { font-size: 8px; }
  .count-chip { font-size: 9px; }
  .species-note { min-height: 47px; font-size: 10px; }
  .support-row { font-size: 10px; }
  .controls-bottom { grid-template-columns: 1fr; }
  .quiz-label, .controls-bottom select, .controls-bottom .button.secondary, .controls-bottom .feedback { grid-column: 1 / -1; }
  .controls-bottom .button.secondary { width: 100%; }
  .food-web { margin-left: -3%; width: 106%; }
  .relation-list li { grid-template-columns: 1fr; gap: 3px; }
  .step-record { padding: 16px; }
  .step-record h2 { font-size: 22px; }
  .log-season details > ul li { grid-template-columns: 1fr; gap: 3px; }
  .scenario-row { grid-template-columns: 1fr; }
  .scenario-button { min-height: 58px; grid-template-columns: 1fr 1fr; align-items: center; }
  .scenario-button strong { grid-column: 1; }
  .scenario-button span { grid-column: 2; grid-row: 1; justify-self: end; }
  .restore-callout { align-items: start; flex-wrap: wrap; }
  .restore-callout .button { width: 100%; }
  .restore-ranges { grid-template-columns: 1fr; }
  .summary-view { margin: 4px auto; padding: 22px 15px; }
  .summary-row { grid-template-columns: 30px 1fr; }
  .summary-row .button { grid-column: 2; justify-self: start; }
  .site-foot { flex-wrap: wrap; }
}
@media (max-width: 390px) {
  .species-board { grid-template-columns: 1fr; }
  .species-card.fox { grid-column: auto; }
  .species-card-top { align-items: center; }
  .species-note { min-height: auto; }
  .brand strong { font-size: 15px; }
  .brand small { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Legible lesson copy and generous controls at every screen size. */
.demonstration { grid-column: 1 / -1; }
.demonstration p { max-width: 76ch; line-height: 1.6; }
.demonstration table { width: 100%; max-width: 600px; border-collapse: collapse; margin: 16px 0; }
.demonstration caption { text-align: left; font-size: 14px; margin-bottom: 8px; }
.demonstration th, .demonstration td { padding: 12px; border: 1px solid #819079; text-align: left; }
.species-card-top { flex-wrap: wrap; }
.species-title { flex: 1 1 100px; }
.presence-control { margin-left: auto; gap: 7px; }
.presence-control button { width: 48px; min-width: 48px; height: 48px; border-color: #74876e; }
.presence-control small, .count-chip, .presence-caption, .range-ends, .role-label { font-size: 12px; color: #526658; }
.presence-control strong { font-size: 16px; }
.species-note { min-height: 0; font-size: 14px; line-height: 1.55; color: #526658; }
.support-row, .quiz-label, .condition-control label, .restore-ranges label, .baseline-line { font-size: 14px; }
.small-copy, .metric-note, .feedback, .compare-callout, .evidence-box, .relation-list li, .summary-row p, .next-practice p { font-size: 15px; line-height: 1.55; }
.small-copy, .metric-note { color: #526658; }
.plain-caption, .scenario-button span, .gentle-note, .onboarding p { font-size: 14px; color: #526658; }
.eyebrow { font-size: 12px; color: #486146; }
.log-season summary { min-height: 48px; font-size: 14px; color: #486146; }
.log-season details > ul li { font-size: 14px; line-height: 1.55; }
.button, .nav-step { min-height: 48px; }
.simulation-tools .button, .reset-button { min-height: 48px; }
input[type="range"] { height: 48px; }
summary { min-height: 44px; cursor: pointer; }
select, .button.quiet, .scenario-button { border-color: #74876e; }
.site-foot, .site-foot a { font-size: 12px; color: #526658; }
@media (max-width: 600px) {
  .nav-step { font-size: 13px; }
  .species-title h3 { font-size: 17px; }
  .demonstration th, .demonstration td { padding: 8px; }
}