*{box-sizing:border-box}body{margin:0;background:#eff2e6;color:#243a2b;font:16px system-ui,sans-serif}main{max-width:1260px;margin:auto;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:42px}h1{font:700 clamp(30px,4vw,48px) Georgia,serif;margin:8px 0}h2{font:700 18px system-ui}p{line-height:1.6}.eyebrow{letter-spacing:.16em;font-size:12px;font-weight:800;color:#536644}nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}select,button{font:inherit;border:1px solid #9ead8d;background:#fffdf4;border-radius:8px;padding:10px 14px;min-height:44px;color:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}#next{background:#284f3a;color:white}#instructions code{background:#dfe7cc;padding:2px 4px;font-weight:bold}#editor{background:#23382d;color:#c6d8c4;padding:18px;border-radius:14px}pre{margin:0;white-space:pre-wrap;font:13px/1.5 ui-monospace,monospace}textarea{width:100%;min-height:90px;resize:vertical;font:15px/1.6 ui-monospace,monospace;background:#f9fff1;color:#203629;border:2px solid #a2bb71;border-radius:6px;padding:10px;margin:8px 0}textarea:focus,button:focus-visible,select:focus-visible{outline:3px solid #d39234;outline-offset:2px}.tools{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}#status{min-height:28px;font-weight:650}#status.solved{color:#236d39}#board{position:relative;width:100%;aspect-ratio:1;border:10px solid #65522c;border-radius:14px;overflow:hidden;isolation:isolate;font-size:16px}.garden-side{align-self:start;position:sticky;top:24px}.legend{font-size:14px}footer{font-size:12px;line-height:1.7;margin-top:24px;color:#596853}a{color:inherit}details{margin-top:16px}summary{cursor:pointer;padding:10px 0}.plot{background-size:70px!important}.plant .bg,.treatment .bg{background-size:70px!important}#overlay{pointer-events:none}#plants{pointer-events:none}progress{width:100%;accent-color:#527b3e;height:9px}@media(max-width:780px){main{padding:18px;display:flex;flex-direction:column;gap:20px}.garden-side{position:static;order:-1}#board{width:min(100%,440px);margin:auto}h1{font-size:32px}pre{font-size:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
#garden,
#plants,
#soil,
#overlay {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#plants {
  z-index: 30;
}

#soil {
  background-color: #523D1F;
  overflow: hidden;
}

.plot {
  width: 100%;
  height: 100%;
  background-color: #6F532A;
  background-color: #836B32;
  background-image: url('dirt.svg');
  background-size: calc(10vw - 4px);
}

#overlay .plot {
  z-index: 50;
  background: none;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 0 #665235;
}

#garden {
  z-index: 20;
}

.plant,
.treatment {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.plant .bg,
.treatment .bg {
  width: 100%;
  height: 100%;
  background-position: left top;
  background-size: calc(10vw - 4px);
}

.plant.carrot .bg {
  background-image: url("carrots.svg");
}

.plant.weed .bg {
  background-image: url("weeds.svg");
}

.plant.carrot.correct .bg {
  background-image: url("carrots-correct.svg");
}

.plant.weed.correct .bg {
  background-image: url("weeds-correct.svg");
}

.treatment.carrot .bg {
  background-color: rgba(81, 140, 179, 1);
  background-image: url("water.svg");
  animation: scroll 6s linear infinite;
}

.treatment.weed .bg {
  background-color: #63393E;
  background-image: url("poison.svg");
  animation: scroll 6s linear infinite;
}



.grid-column-start-1 {
  grid-column-start: 1;
}

.grid-column-start-2 {
  grid-column-start: 2;
}

.grid-column-start-5 {
  grid-column-start: 5;
}

.grid-column-end-6 {
  grid-column-end: 6;
}

.grid-column-4 {
  grid-column: 4;
  grid-row: 1 / 6;
}

.grid-template-columns-repeat-8-12 {
  grid-template-columns: repeat(8, 12.5%) !important;
}

.grid-template-columns-100px-3em-40p {
  grid-template-columns: 100px 3em 40% !important;
}

.grid-template-columns-1fr-5fr {
  grid-template-columns: 1fr 5fr !important;
}

.grid-template-columns-75px-2fr-1fr {
  grid-template-columns: 75px 2fr 1fr !important;
}

.grid-template-columns-50px-1fr-1fr-1fr-50px {
  grid-template-columns: 50px 1fr 1fr 1fr 50px !important;
}

.grid-template-rows-50px-0-0-0-1fr {
  grid-template-rows: 50px 0 0 0 1fr !important;
}

.grid-template-rows-100p {
  grid-template-rows: 100% !important;
}

.grid-template-columns-6 {
  grid-template-columns: 75px 3fr 2fr !important;
  grid-template-rows: 100% !important;
}

.grid-area-1-1-6-2 {
  grid-area: 1 / 1 / 6 / 2;
}

.grid-area-5-1-6-6 {
  grid-area: 5 / 1 / 6 / 6;
}

.grid-area-1-5-6-6 {
  grid-area: 1 / 5 / 6 / 6;
}

.grid-template-2 {
  grid-template: 1fr 50px / 20% 1fr !important;
}

@keyframes scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 calc(10vw - 4px); }
}