:root { color-scheme: light; --ink:#17231e; --muted:#64736c; --cream:#f6f4ed; --card:#fff; --green:#236b4a; --mint:#dcefe2; --orange:#df8a4c; }
* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.5 system-ui,sans-serif; }
.shell { max-width:880px; margin:auto; padding:52px 22px 80px; } header { max-width:650px; margin-bottom:30px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.15em; } h1 { font:700 clamp(2.3rem,7vw,4.8rem)/.98 Georgia,serif; margin:12px 0 20px; letter-spacing:-.04em; } .lede { color:var(--muted); font-size:1.18rem; }
.card { background:var(--card); border:1px solid #e4e7df; border-radius:18px; padding:26px; margin:18px 0; box-shadow:0 12px 35px #1c2d2010; } .section-heading { display:flex; gap:14px; align-items:flex-start; margin-bottom:24px; } .step { color:var(--green); font-weight:800; font-size:13px; letter-spacing:.08em; } h2 { margin:0; font-size:1.25rem; } .section-heading p { color:var(--muted); margin:3px 0 0; font-size:.9rem; }
label { display:block; font-weight:650; margin:20px 0; } output { float:right; color:var(--green); font-variant-numeric:tabular-nums; } input[type=range] { display:block; width:100%; margin-top:12px; accent-color:var(--green); } .control-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .hint,.assumption { color:var(--muted); font-size:.87rem; }
.winner { background:var(--mint); color:var(--green); border-radius:10px; padding:12px 14px; font-weight:700; margin-bottom:24px; } .bar-row { display:grid; grid-template-columns:130px 1fr 100px; align-items:center; gap:12px; margin:18px 0; } .bar-track { background:#edf0ea; height:18px; border-radius:20px; overflow:hidden; } .bar { height:100%; width:0; transition:width .25s; border-radius:20px; } .a-bar { background:var(--green); } .b-bar { background:var(--orange); } .bar-row output { text-align:right; float:none; }
.species-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; } article { background:#fafaf7; border-radius:12px; padding:16px; } .animal { font-size:1.6rem; } h3 { margin:3px 0; } article p { margin:0; color:var(--muted); } .sources { color:var(--muted); font-size:.92rem; margin-top:28px; } .sources h2 { color:var(--ink); } a { color:var(--green); font-weight:650; }
@media (max-width:600px) { .control-grid,.species-grid { grid-template-columns:1fr; gap:0; } .bar-row { grid-template-columns:105px 1fr; } .bar-row output { grid-column:2; text-align:left; margin-top:-10px; } }