*{box-sizing:border-box}body{margin:0;color:#294c3b;background:#f4f4ee;font:15px/1.6 system-ui,sans-serif}main{max-width:1120px;padding:24px;margin:auto}nav{display:flex;gap:24px;font-size:13px;margin-bottom:18px}a{color:#477258;text-underline-offset:4px}header{display:flex;align-items:center;gap:18px;flex-wrap:wrap}h1{font-size:28px;line-height:1.3;margin:0}.badge{border-radius:99px;background:#e0e9d9;font-size:12px;padding:5px 12px}.intro{color:#74816e;margin:12px 0 16px}.steps{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.steps span{font-size:13px;border-radius:99px;padding:5px 12px;background:#e8ede3;color:#7c8a77}.steps .active{color:white;background:#4c7459}.layout{display:grid;grid-template-columns:minmax(0,660px) 1fr;gap:24px;align-items:start}.stage{width:100%;max-width:660px;aspect-ratio:1;border:1px solid #d6dfd2;border-radius:16px;overflow:hidden}.stage.small{max-width:240px}canvas{display:block;width:100%;height:auto}.stage,.zoom canvas{background-color:#eff1ea;background-image:conic-gradient(#cdd5c8 25%,transparent 0 50%,#cdd5c8 0 75%,transparent 0);background-size:32px 32px}body[data-bg=white] .stage,body[data-bg=white] .zoom canvas{background:#fff}body[data-bg=black] .stage,body[data-bg=black] .zoom canvas{background:#080b09}body[data-bg=forest] .stage,body[data-bg=forest] .zoom canvas{background:#172e25}.actions,.backgrounds{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}button,select{font:inherit;font-size:13px;cursor:pointer;border:1px solid #cad5c5;border-radius:8px;color:#35533c;background:#fafff5;padding:8px 12px}button[aria-pressed=true]{background:#4c7459;border-color:#4c7459;color:white}button:disabled{cursor:wait;opacity:.5}#only-enter{font-weight:650;border-color:#73916b}input[type=range]{width:100%;accent-color:#4c7459}output,.quiet{font-size:12px;color:#7f8a79}output{display:block;font-variant-numeric:tabular-nums}.zoom,.notes{background:#fffefb;border:1px solid #dae1d3;border-radius:14px;overflow:hidden}.zoom p{font-size:12px;color:#7c8875;margin:10px 16px}.notes{margin-top:16px;padding:18px}.notes h2{font-size:18px;margin:0 0 10px}.notes p{font-size:13px;margin:9px 0}.links{display:flex;flex-direction:column;gap:10px;margin-top:18px;font-size:13px}@media(max-width:740px){main{padding:16px}.layout{grid-template-columns:1fr}.zoom{max-width:420px}h1{font-size:24px}}

.comparison{margin:30px 0;padding:22px;border:1px solid #d8dfd3;border-radius:22px;background:#fff9}.comparison summary{cursor:pointer;font-weight:700}.comparison img{display:block;width:100%;height:auto;border-radius:14px;margin-top:16px}