:root { --ink:#173138; --muted:#597075; --paper:#f6f1e7; --panel:#fffdf8; --line:#d8ddd1; --teal:#0b6a69; --dark:#344c46; --pale:#d9b876; --focus:#e3522a; font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; color:var(--ink); background:#dce7e1; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 10% 2%, #eef7f1, transparent 31rem), #dce7e1; } button, select, input { font:inherit; } button { cursor:pointer; } button:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } .app-shell { max-width:1180px; margin:auto; padding:clamp(1rem,3vw,3.2rem); }
.masthead { display:flex; justify-content:space-between; gap:2rem; align-items:start; padding:1rem 0 1.7rem; } h1,h2,p { margin-top:0; } h1 { font-size:clamp(2.2rem,5vw,4.6rem); line-height:.98; letter-spacing:-.06em; max-width:720px; margin:.35rem 0 .75rem; } h2 { font-size:1.15rem; margin:.2rem 0 0; } .lede { color:var(--muted); font-size:1.05rem; max-width:600px; margin-bottom:0; } .eyebrow { font-size:.69rem; font-weight:800; letter-spacing:.13em; color:#527270; margin:0; } .text-button,.copy-button { border:0; color:var(--teal); font-weight:750; background:transparent; text-decoration:underline; text-underline-offset:3px; padding:.4rem; } .model-notes { background:#e9f1eb; border-left:4px solid var(--teal); padding:1rem 1.1rem; line-height:1.48; margin-bottom:1rem; border-radius:0 .7rem .7rem 0; }
.question-card,.panel { background:var(--panel); border:1px solid rgba(29,65,59,.12); box-shadow:0 14px 38px rgba(29,65,59,.08); border-radius:1rem; } .question-card { padding:1.1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .question-card h2 { font-size:1.25rem; max-width:660px; } .prediction-field { display:grid; gap:.4rem; color:var(--muted); font-size:.82rem; font-weight:700; min-width:220px; } select { background:#fff; border:1px solid var(--line); border-radius:.55rem; padding:.6rem; color:var(--ink); }
.workspace,.evidence-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:1rem; margin-bottom:1rem; }.panel { padding:1.15rem; }.panel-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; margin-bottom:1rem; }.generation-badge { padding:.35rem .55rem; border-radius:999px; background:#e8efe9; color:#34524c; white-space:nowrap; font-size:.8rem; font-weight:800; }.marsh { min-height:370px; overflow:hidden; position:relative; isolation:isolate; border-radius:.75rem; border:1px solid rgba(0,0,0,.08); background:#d8c597; transition:background .25s ease; }.marsh.dark { background:#4e5142; }.marsh.mixed { background:linear-gradient(105deg,#d8c597 0 45%,#4e5142 46% 100%); }
fieldset { border:0; padding:0 0 1.2rem; margin:0 0 1.2rem; border-bottom:1px solid var(--line); } fieldset:last-of-type { margin-bottom:1rem; } legend { font-size:.85rem; font-weight:800; margin-bottom:.7rem; }.segmented-control { display:grid; gap:.45rem; }.choice { text-align:left; border:1px solid var(--line); border-radius:.55rem; background:#fff; color:var(--ink); padding:.65rem .75rem; font-weight:750; }.choice.active { color:#fff; background:var(--teal); border-color:var(--teal); }.hint { font-size:.83rem; color:var(--muted); line-height:1.4; margin:.65rem 0 0; }.range-label { display:flex; justify-content:space-between; font-size:.85rem; font-weight:750; }.range-label output { color:var(--teal); } input[type=range] { accent-color:var(--teal); width:100%; margin-top:.7rem; }.run-controls { display:grid; grid-template-columns:1fr; gap:.55rem; }.primary-button,.secondary-button { min-height:2.75rem; border-radius:.6rem; font-weight:800; border:1px solid var(--teal); }.primary-button { color:white; background:var(--teal); }.secondary-button { color:var(--teal); background:#eff6f0; }.primary-button:disabled,.secondary-button:disabled { opacity:.6; cursor:wait; }.utility-controls { display:flex; flex-wrap:wrap; margin-top:.5rem; }.seed-readout { margin:1rem 0 0; color:var(--muted); font-size:.75rem; }.seed-readout code { color:var(--ink); }.copy-button { font-size:.75rem; }
.evidence-grid { grid-template-columns:.85fr 1.15fr; }.outcome-copy { min-height:4.5rem; line-height:1.46; color:var(--muted); }.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:0; }.stat-row div { border-left:3px solid var(--line); padding-left:.55rem; }.stat-row dt { font-size:.72rem; color:var(--muted); font-weight:750; }.stat-row dd { margin:.1rem 0 0; font-size:1.55rem; font-weight:850; }.proportion-bar { display:flex; height:.8rem; overflow:hidden; border-radius:999px; background:#edf0e9; margin-top:1rem; }.proportion-bar div { transition:width .25s ease; }.proportion-bar #pale-bar { background:#d0ad61; }.proportion-bar #dark-bar { background:#315c57; flex:1; }.chart-panel { min-width:0; }.chart-panel svg { display:block; width:100%; overflow:visible; font-size:10px; fill:#657a76; }.grid line { stroke:#dce5dd; stroke-dasharray:3 4; }.line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.table-panel { margin-bottom:1rem; }.table-note { color:var(--muted); font-size:.82rem; margin:0; }.table-wrap { overflow-x:auto; }table { width:100%; border-collapse:collapse; min-width:560px; font-size:.86rem; }th,td { text-align:left; padding:.7rem .45rem; border-bottom:1px solid var(--line); }th { color:#58716c; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; } footer { color:#58716c; text-align:center; font-size:.78rem; padding:1rem; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@keyframes bob { to { transform:translateY(-4px) rotate(8deg); } } @media (max-width:760px) { .masthead,.question-card { display:block; }.masthead .text-button { margin-top:.8rem; }.prediction-field { margin-top:1rem; max-width:none; }.workspace,.evidence-grid { grid-template-columns:1fr; }.marsh { min-height:310px; }.question-card { padding:1rem; }.panel { padding:1rem; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.prediction-field small { font-weight:500; line-height:1.35; }.reflection { margin-top:1rem; background:#e9f1eb; border-radius:.65rem; padding:.8rem .9rem; }.reflection p:last-child { margin:.35rem 0 0; color:#395851; line-height:1.45; font-size:.9rem; }

/* Habitat and beetle artwork derived from the supplied classroom asset sheets. */
.marsh { background:#d8c597 center / cover no-repeat url("assets/pale-dry-silt.webp"); }
.marsh.dark { background:#4e5142 center / cover no-repeat url("assets/dark-wet-sediment.webp"); }
.marsh.mixed { background:#697159 center / cover no-repeat url("assets/mixed-marsh.webp"); }
.event-card { position:absolute; z-index:3; left:1rem; right:1rem; bottom:1rem; background:rgba(255,253,248,.89); border:1px solid rgba(26,56,52,.14); border-radius:.55rem; padding:.6rem .7rem; text-align:center; font-size:.82rem; font-weight:800; backdrop-filter:blur(4px); }
.beetle { position:absolute; z-index:2; left:var(--x); top:var(--y); width:42px; height:28px; background:center / contain no-repeat; transform:rotate(-7deg); animation:bob 2.2s ease-in-out var(--delay) infinite alternate; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.beetle.pale { background-image:url("assets/pale-speckled-beetle.webp"); }
.beetle.dark { background-image:url("assets/dark-grey-speckled-beetle.webp"); }
.legend,.bar-labels { display:flex; justify-content:space-between; gap:1rem; margin:.75rem 0 0; color:var(--muted); font-size:.8rem; font-weight:700; }
.legend span { display:flex; align-items:center; gap:.35rem; }
.swatch { width:27px; height:18px; border-radius:0; background:center / contain no-repeat; }
.pale-pattern { background-image:url("assets/pale-speckled-beetle.webp"); border:0; }
.dark-pattern { background-image:url("assets/dark-grey-speckled-beetle.webp"); border:0; }

.finch-flyover { position:absolute; z-index:4; inset:0; pointer-events:none; overflow:hidden; opacity:0; }
.finch-flyover i { position:absolute; top:var(--finch-y); left:-210px; width:var(--finch-width); height:calc(var(--finch-width) * .64); background:center / contain no-repeat url("assets/ground-finch-shadow.webp"); filter:brightness(0) opacity(.6) blur(.5px); transform:rotate(14deg); }
.finch-flyover i:nth-child(1) { --finch-y:40px; --finch-width:190px; animation-delay:0ms; }.finch-flyover i:nth-child(2) { --finch-y:158px; --finch-width:132px; animation-delay:115ms; }.finch-flyover i:nth-child(3) { --finch-y:254px; --finch-width:102px; animation-delay:225ms; }
.finch-flyover.active { opacity:1; }.finch-flyover.active i { animation:finch-cross 1650ms cubic-bezier(.2,.7,.32,1) both; }
@keyframes finch-cross { 0% { left:-210px; opacity:0; transform:rotate(14deg) scale(.9); } 12% { opacity:.72; } 42% { left:42%; opacity:.72; transform:rotate(11deg) scale(1); } 54% { left:52%; opacity:.84; transform:rotate(14deg) scale(.84); } 66% { left:62%; opacity:.72; transform:rotate(17deg) scale(1); } 88% { opacity:.72; } 100% { left:calc(100% + 20px); opacity:0; transform:rotate(14deg) scale(.9); } }
.chart-key { display:flex; flex-wrap:wrap; gap:.75rem 1rem; color:var(--muted); font-size:.78rem; font-weight:800; margin:-.35rem 0 .35rem; }.key-pale { color:#8a5f13; }.key-dark { color:#174f58; }
.chart-controls { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:end; padding:.6rem 0; margin:0; border:0; font-size:.74rem; color:var(--muted); font-weight:800; }.chart-controls legend { margin:0; }.chart-controls p { width:100%; margin:0; font-weight:600; }.chart-controls label { display:grid; gap:.25rem; }.chart-controls select { padding:.35rem; font-size:.78rem; }.chart-controls .secondary-button { min-height:2.2rem; padding:.35rem .65rem; }
.chart-panel.expanded { grid-column:1 / -1; }.chart-panel.expanded svg { min-height:430px; }.chart-panel.expanded .chart-controls { font-size:.82rem; }
.chart-panel.dense-chart { overflow-x:auto; }
@media (max-width:620px) { .chart-panel { overflow-x:auto; }.chart-panel svg { min-width:540px; }.chart-panel.expanded svg { min-height:340px; } }
.chart-selection { min-height:2.6rem; margin:.45rem 0 0; color:#395851; font-size:.82rem; line-height:1.4; }.chart-point { cursor:pointer; }.chart-point:focus-visible { outline:none; }.chart-point:focus-visible .point-hit { stroke:var(--focus); stroke-width:3; }.selected-point .point-hit { stroke:#e3522a; stroke-width:3; }.selected-point .point-mark { stroke:#fffdf8; stroke-width:2; }.range-band { fill:#e3522a; opacity:.13; }.annotation line { stroke:#53716a; stroke-dasharray:3 3; }.annotation text { fill:#395851; font-size:9px; font-weight:700; }.axis-label { fill:#395851; font-size:10px; font-weight:800; }.table-wrap { max-height:22rem; overflow:auto; border:1px solid var(--line); border-radius:.65rem; }.table-wrap:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } thead { position:sticky; top:0; z-index:1; background:var(--panel); } tr.chart-selected td { background:#fff3db; }
@media (prefers-reduced-motion:reduce) { .finch-flyover { display:none; } }

/* Sciesmic Labs upgrade: step labels, checks panel, kit token overrides */
:root { --lk-accent:#0b6a69; --lk-ink:#173138; }
.step-label { margin:.25rem 0 .55rem .2rem; }
.checks-panel { margin-bottom:1rem; }
.model-notes .lk-term, .hint .lk-term, .reflection .lk-term, .lede .lk-term, h2 .lk-term, legend .lk-term, .table-note .lk-term { font-weight:inherit; }
.prediction-field select { width:100%; max-width:100%; text-overflow:ellipsis; }
@media (max-width:760px) { .prediction-field { min-width:0; } }