:root{font-family:"Segoe UI",Tahoma,sans-serif;color:#294633;background:#f4f9f4}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:30px 36px 48px}.back{color:#2e7d32;font-size:14px;text-decoration:none}header{margin:32px 0}h1{font-size:clamp(28px,3.2vw,43px);color:#2e7d32;letter-spacing:-1px;margin:10px 0}header p{color:#6c7f70;line-height:1.7}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#64836c}h2{font-size:20px;margin:0 0 18px}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px}.panel,.stats{background:white;border:1px solid #dce8dc;border-radius:14px;box-shadow:0 4px 16px #254c2910}.panel{padding:24px;min-width:0}label{display:block;font-weight:600;font-size:12px;margin:18px 0 9px}select{width:100%;font:inherit;font-size:13px;padding:12px 9px;border:1px solid #cedfce;background:#fbfdfb;border-radius:6px;color:inherit}.muted{font-size:12px;line-height:1.7;color:#6c7f70}.badge{font-size:10px;font-weight:600;color:#4f7755;background:#edf5ed;border-radius:20px;padding:7px 10px;display:inline-block}.primary{display:block;width:100%;margin-top:26px}button{font:600 12px "Segoe UI",sans-serif;border:0;border-radius:6px;padding:11px 14px;cursor:pointer;background:#4caf50;color:white}button:hover{background:#388b3f}button:disabled{opacity:.45;cursor:default}.secondary{background:#edf5ed;color:#34713b}.secondary:hover{background:#dcebdc}.actions{display:flex;gap:8px;margin-top:10px}.actions button{flex:1}.text-button{background:transparent;color:#5f7b64;padding:12px 0}.text-button:hover{background:transparent;text-decoration:underline}input[type=range]{width:100%;accent-color:#4caf50}output{float:right;font-weight:400}hr{border:0;border-top:1px solid #e2ebe2;margin:22px 0}.board-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.board-heading h2{margin:7px 0 18px}.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid #e5eee5;padding-top:15px}.toolbar>span{font-size:12px;color:#758879;margin-right:auto}.toolbar button{background:#f1f6ef;color:#5c7461;padding:8px 11px}.toolbar button[aria-pressed=true]{background:#2e7d32;color:white}.grid-viewport{overflow:auto;border:1px solid #dbe6d7;border-radius:9px;background:#edf3e9;padding:14px}#grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(18px,1fr));gap:3px;min-width:calc(var(--cols)*21px - 3px);max-width:740px;margin:auto;touch-action:none;user-select:none}.cell{padding:0;min-width:0;width:100%;aspect-ratio:1;border-radius:3px;border:1px solid #dbe7d5;background:#fafdf7;transition:background-color .16s,border-color .16s;position:relative;font-size:clamp(9px,1vw,13px);font-weight:700;color:white}.cell:hover{outline:2px solid #9ab49a;outline-offset:-2px;background:#e1ebda}.cell.wall,.swatch.wall{background:#45614d;border-color:#45614d}.cell.visited,.swatch.visited{background:#b9dbac;border-color:#a3ca97}.cell.path,.swatch.path{background:#e9be60;border-color:#d8a641}.cell.start,.swatch.start{background:#2e7d32;border-color:#286e2c}.cell.goal,.swatch.goal{background:#b85d4b;border-color:#a34e3e}.cell.current,.swatch.current{box-shadow:inset 0 0 0 3px #6e81ae}.cell.current:after{content:'';position:absolute;inset:25%;border-radius:50%;background:#536b9d}.cell.start:after,.cell.goal:after{display:none}.legend{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0;font-size:11px;color:#6d8072}.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin-right:6px}.status-line{border-top:1px solid #e4ece1;padding-top:16px;display:flex;align-items:flex-start;gap:12px}.status-line p{margin:3px 0;font-size:12px;line-height:1.7}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0;padding:22px 8px}.stats>div{padding:0 22px;border-right:1px solid #e5eee5}.stats>div:last-child{border:0}.stats span{font-size:10px;letter-spacing:1.2px;color:#78907c}.stats strong{display:block;font-size:25px;font-weight:600;margin-top:8px}.lesson{display:grid;grid-template-columns:1fr 1fr;gap:35px}.lesson h2{margin:10px 0}.lesson p,.lesson li{font-size:14px;line-height:1.8;color:#6c7f70}.lesson ol{margin:0;padding-left:24px}.lesson li{padding-bottom:10px}:focus-visible{outline:3px solid #c99a3e;outline-offset:3px}@media(max-width:850px){main{padding:22px 16px}.workspace,.lesson{grid-template-columns:1fr}.panel{padding:20px}.stats{grid-template-columns:repeat(2,1fr);gap:22px}.stats>div:nth-child(2){border:0}.board-heading{align-items:start;flex-direction:column}.board-heading .badge{margin-bottom:16px}.grid-viewport{padding:8px}.toolbar>span{width:100%}.legend{gap:10px}.stats strong{font-size:21px}.lesson{gap:12px}}@media(prefers-reduced-motion:reduce){.cell{transition:none}}
/* Discovery grows from the parent-facing edge, making branch splits visible. */
.cell.frontier:not(.start):not(.goal),.swatch.frontier{background:#e2f3ed;border-color:#4c9b84}
.cell.spreading:not(.start):not(.goal)::before{content:'';position:absolute;inset:0;border-radius:2px;background:#6fbba2;transform-origin:var(--grow-from,50% 50%);animation:branch-spread var(--spread-duration,220ms) ease-out both;pointer-events:none}
.cell.path::before{display:none}
@keyframes branch-spread{from{transform:scale(.05);opacity:.4}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.cell.spreading::before{animation:none!important}}