@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root{--ink:#253b35;--muted:#6b7771;--green:#28664d;--border:#dce2d9;--paper:#f6f7f1}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}header{height:80px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#fff}.brand{font-weight:700;font-size:21px;letter-spacing:2px;color:var(--ink);text-decoration:none}.brand span{display:inline-block;font-size:9px;letter-spacing:1.5px;margin-left:16px;max-width:90px}.tag,.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700}.tag{color:var(--muted)}main{max-width:1450px;margin:auto;padding:40px 5% 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{color:var(--green);margin:0 0 12px}h1{font:38px 'Libre Baskerville',Georgia,serif;letter-spacing:-1.4px;margin:0 0 16px}.intro p:not(.eyebrow){color:var(--muted);max-width:580px;line-height:1.7;margin:0}.lesson{display:flex;gap:15px;font:40px Georgia;color:#a6b3a3}.lesson span{font:12px/1.8 'DM Sans',sans-serif;color:var(--muted)}.lesson b{font-weight:500;color:var(--ink)}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px}.panel{background:white;border:1px solid var(--border);border-radius:12px}h2{font-size:16px;margin:0;font-weight:600}.controls{padding:24px;height:max-content}.controls h2{margin-bottom:26px}.controls label{display:block;font-size:12px;font-weight:600;margin:20px 0 10px}output{float:right;color:var(--green);font-size:11px}input:not([type=range]),select{font:inherit;background:#fafbf7;border:1px solid var(--border);border-radius:6px;padding:10px;width:100%;color:var(--ink);margin-top:9px}input[type=range]{width:100%;accent-color:var(--green);margin:15px 0 0}.hint{font-size:11px;color:var(--muted);line-height:1.7}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}hr{border:0;border-top:1px solid var(--border);margin:23px 0}button{font:600 12px 'DM Sans',sans-serif;background:var(--green);color:white;border:1px solid var(--green);padding:12px 18px;border-radius:6px;cursor:pointer}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:default}.secondary{background:white;color:var(--ink);border-color:var(--border)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d99a32;outline-offset:3px}#new{width:100%;margin-top:16px}.lab{min-width:0;display:grid;gap:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px}.panel-heading .eyebrow{font-size:9px;margin-bottom:8px}.status{font-size:10px;background:#edf3e9;border-radius:20px;padding:7px 11px;color:var(--green)}.field-wrap{position:relative;margin:0 12px;border-radius:8px;overflow:hidden;background:#ddd0af}#field{display:block;width:100%;height:300px}.field-note{position:absolute;bottom:15px;left:18px;font-size:8px;letter-spacing:1.8px;color:white;text-shadow:0 1px 4px #333}.generation{position:absolute;right:16px;top:16px;background:#ffffffd9;border-radius:7px;padding:12px;font-size:8px;letter-spacing:1px}.generation strong{display:block;font:30px Georgia;letter-spacing:0;text-align:center;margin-top:4px}.playbar{display:flex;gap:10px;align-items:center;padding:16px 24px}.speed{display:flex;gap:8px;align-items:center;margin-left:auto;font-size:11px;color:var(--muted)}.speed select{margin:0;width:65px;padding:8px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stats .panel{padding:19px 22px}.stats span{font-size:11px;color:var(--muted)}.stats strong{font:32px 'Libre Baskerville',Georgia;display:block;margin:10px 0}.stats small{font-size:10px;color:var(--muted)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;border:1px solid #9e8e70}.light{background:#c9ad7d}.dark{background:#344c49;border-color:#344c49}.total{background:#91aa83;border-color:#91aa83}.tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px;gap:24px}.tabs button{padding:12px 0;border:0;border-radius:0;background:none;color:var(--muted)}.tabs button[aria-pressed=true]{color:var(--green);border-bottom:2px solid var(--green)}#chartView{padding:20px 24px 6px}.legend{display:flex;gap:22px;font-size:10px;justify-content:flex-end}#chart{width:100%;display:block;margin-top:12px}.table-scroll{max-height:350px;overflow:auto}table{width:100%;border-collapse:collapse;text-align:right;font-size:11px}th,td{padding:12px 14px;border-bottom:1px solid #edf0e9}th{background:#f7f9f4;position:sticky;top:0;font-weight:500}th:first-child,td:first-child{text-align:left}.explanation{padding:20px 24px;font-size:12px;line-height:1.9;color:var(--muted)}summary{font-weight:600;color:var(--ink);cursor:pointer}.explanation a{color:var(--green)}footer{margin-top:32px;border-top:1px solid var(--border);padding:20px 0;font-size:11px;color:var(--muted)}footer span{float:right}@media(max-width:900px){main{padding:28px 20px}.workspace{grid-template-columns:220px minmax(0,1fr);gap:16px}.controls{padding:18px}.lesson{display:none}h1{font-size:32px}.playbar{flex-wrap:wrap;padding:14px}.stats .panel{padding:16px 12px}.panel-heading{padding:18px}.status{max-width:100px;text-align:center}}@media(max-width:650px){header{height:65px;padding:0 20px}.tag,.brand span{display:none}.workspace{display:flex;flex-direction:column}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.controls h2,.controls hr,.controls .hint,.controls .range-labels{grid-column:1/-1}.controls label{min-width:0}#new{align-self:end}.intro{margin-bottom:24px}h1{font-size:29px}.intro p:not(.eyebrow){font-size:13px}.stats{gap:8px}.stats strong{font-size:27px}.stats span{font-size:10px}.stats small{font-size:9px}#field{height:260px}.panel-heading{padding:16px}#download{padding:10px;font-size:10px}.speed{margin-left:0}.playbar button{flex:1}.generation{padding:9px}footer span{display:block;float:none;margin-top:8px}}

/* Allow room for classroom instructions and the full activity title. */
h1{font-size:34px;letter-spacing:-.8px}.intro p:not(.eyebrow){max-width:680px}.intro{gap:24px}@media(max-width:650px){h1{font-size:27px}.panel-heading{flex-wrap:wrap}}

.downloads{display:flex;flex-wrap:wrap;gap:8px}