.hands-on-workshops{--how-green:#2f533c;--how-ink:#293e30;--how-paper:#f7f1df;--how-line:#d6d9bf;position:fixed;z-index:185;right:24px;top:84px;width:min(410px,calc(100vw - 32px));max-height:calc(100dvh - 108px);box-sizing:border-box;overflow:auto;overscroll-behavior:contain;background:var(--how-paper);color:var(--how-ink);border:1px solid rgba(74,99,62,.3);border-radius:22px;box-shadow:0 18px 65px #172d2547;font:15px/1.55 'Nunito',system-ui,sans-serif;scrollbar-color:#8ba47a #eee9d7;isolation:isolate}
.hands-on-workshops[hidden]{display:none!important}.hands-on-workshops *{box-sizing:border-box}.hands-on-workshops button,.hands-on-workshops input{font:inherit}.hands-on-workshops button{cursor:pointer;touch-action:manipulation}.hands-on-workshops button:disabled{cursor:default;opacity:.6}.hands-on-workshops :focus-visible{outline:3px solid #bd8b38;outline-offset:3px}.hands-on-workshops button,.hands-on-workshops a{-webkit-tap-highlight-color:transparent}.how-header{position:relative;padding:22px 24px 17px;background:linear-gradient(120deg,#234c37,#47704b);color:#fff7df;border-radius:21px 21px 0 0}.how-eyebrow{margin:0 0 6px;font-size:10px;letter-spacing:.15em;font-weight:850;color:#e5d7a1}.how-title{font:750 25px/1.2 'Nunito',system-ui,sans-serif;margin:0 0 9px;max-width:300px}.how-pause{padding:4px 0;border:0;border-bottom:1px solid #ebecd383;background:none;color:#f8efcf;font-size:12px!important}.how-body{padding:0 23px 22px}.how-live{margin:0;padding:12px 23px 0;min-height:34px;color:#4b6445;font-size:12px;line-height:1.5}.how-intro{margin:12px 0 17px;font-size:14px}.how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0;margin:0 0 17px;list-style:none}.how-steps li{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;font-size:10px;font-weight:750;color:#74816c}.how-step-dot{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #c7cfb7;background:#edeedc;font-size:12px}.how-steps .is-done{color:#365c3c}.how-steps .is-done .how-step-dot{background:#496b43;border-color:#496b43;color:#fff}.how-steps [aria-current=step]{color:#714c1f}.how-steps [aria-current=step] .how-step-dot{background:#e9d39d;border-color:#bb944a;color:#4d421d}.how-scene-line{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#6d755e;margin-bottom:7px}.how-text-button{border:0;background:none;color:#365d3e;text-decoration:underline;text-underline-offset:3px;font-size:12px!important;padding:6px 0;min-height:32px}.how-target{position:relative;display:block;width:100%;height:178px;padding:0;border:1px solid #d0d8bd;border-radius:17px;background:radial-gradient(ellipse at 50% 35%,#fbf8e9,#e2e6cd);overflow:hidden;color:#4e6546}.how-target:not(:disabled):hover{border-color:#7d9a66;background:radial-gradient(ellipse at 50% 35%,#fffced,#dce4c8)}.how-target-caption{position:absolute;bottom:9px;left:8px;right:8px;font-size:10px;letter-spacing:.01em}.how-mini-scene{position:absolute;inset:12px 0 29px;display:block;pointer-events:none}.how-pot{position:absolute;width:125px;height:85px;left:50%;top:32px;transform:translateX(-50%) skewY(-3deg);border-radius:11px 11px 28px 23px;background:linear-gradient(100deg,#bd7e4d,#d49b62 53%,#b87a47);border:2px solid #a96f43;box-shadow:0 12px 10px #66754725}.how-pot:before{content:'';position:absolute;left:-7px;right:-7px;top:-10px;height:27px;border:7px solid #c18d5c;border-radius:50%;background:#887054}.how-soil{position:absolute;left:0;right:0;top:-4px;height:17px;background:radial-gradient(circle,#b18a58 1px,transparent 2px) 0 0/11px 6px,#654a31;border-radius:50%;z-index:1}.how-seeds{position:absolute;left:9px;right:9px;top:1px;height:10px;display:flex;justify-content:space-around;z-index:2}.how-seeds i{width:5px;height:3px;background:#caa878;border-radius:60%;transform:rotate(23deg)}.is-moist .how-soil{filter:brightness(.78)}.how-drops{position:absolute;left:50%;top:4px;transform:translateX(-50%);font-size:36px;line-height:1;color:#7398a4}.how-marker{position:absolute;left:calc(50% + 29px);top:12px;max-width:105px;min-width:63px;padding:5px 6px 18px;background:#ead7ac;clip-path:polygon(0 0,100% 0,100% 68%,58% 68%,58% 100%,45% 100%,45% 68%,0 68%);font:9px/1.2 'Nunito',sans-serif;transform:rotate(5deg);color:#58482d;overflow-wrap:anywhere;z-index:3}.how-bin{position:absolute;left:50%;top:31px;width:157px;height:90px;transform:translateX(-50%) skewY(-3deg);background:repeating-linear-gradient(0deg,#977146 0 14px,#b38b56 14px 20px,#705c3d 20px 23px);border:4px solid #88704b;border-radius:4px 4px 12px 12px;box-shadow:0 12px 10px #66754725}.how-bin:before{content:'';position:absolute;left:-3px;right:-3px;top:-21px;height:42px;border-radius:50%;background:#726047;border:5px solid #9b8154}.how-compost-layer{position:absolute;left:8px;right:8px;top:-11px;height:28px;z-index:1;display:flex;flex-wrap:wrap;align-content:center;gap:4px}.how-compost-layer i{display:block;width:15px;height:8px;background:#a09a55;border-radius:2px 9px;transform:rotate(-23deg)}.how-material-peelings{top:2px;left:14px}.how-material-peelings i{background:#c28c4b;border-radius:50%;height:7px;width:18px;transform:rotate(23deg)}.how-material-twigs{top:-6px;left:20px}.how-material-twigs i{background:#786044;width:20px;height:3px;transform:rotate(35deg)}.is-mixed .how-compost-layer{transform:rotate(7deg)}.is-mixed .how-material-peelings{transform:rotate(-9deg);top:-6px}.is-mixed .how-material-twigs{transform:rotate(20deg);top:2px}.how-compost-scene.is-dry .how-bin{filter:saturate(.55) brightness(1.08)}.how-compost-scene.is-wet .how-bin{filter:brightness(.8)}.how-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:16px 0 12px}.how-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;padding:8px 3px;background:#eeeede;border:1px solid #d5ddc7;border-radius:11px;color:#5a684d;font-size:10px!important;font-weight:750!important;line-height:1.2}.how-tool:hover{background:#e5e9d4}.how-tool[aria-pressed=true]{background:#dce6c8;border-color:#5c7f4e;color:#284d31;box-shadow:inset 0 0 0 1px #5c7f4e}.how-icon{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;flex:none}.how-icon svg{width:100%;height:100%}.how-primary{display:block;width:100%;min-height:46px;border:1px solid #2f5638;border-radius:11px;padding:10px 14px;background:#3f6844;color:#fffbe9;font-weight:800!important;box-shadow:0 3px 0 #25492d;font-size:14px!important;transition:background .15s}.how-primary:hover{background:#315a38}.how-primary:active{transform:translateY(1px);box-shadow:0 2px 0 #25492d}.how-finish{margin-top:14px;background:#6e783d;border-color:#58672f;box-shadow:0 3px 0 #47552a}.how-label-input{display:flex;flex-direction:column;gap:5px;margin:10px 0;font-size:12px;font-weight:750}.how-label-input input{min-height:43px;width:100%;border:1px solid #b2bea4;border-radius:8px;padding:8px 10px;background:#fffdf2;color:#293e30}.how-comparisons{margin-top:17px}.how-comparisons h3{font-size:15px;margin:0 0 4px}.how-comparisons p{font-size:12px;margin:0 0 8px}.how-compare{display:block;width:100%;text-align:left;border:1px solid #c5cfb3;background:#f2f1df;border-radius:10px;padding:10px 12px;margin:7px 0;color:#3f5337}.how-compare strong{display:block;font-size:13px}.how-compare span{display:block;font-size:11px;line-height:1.4}.how-compare[aria-pressed=true]{background:#e1e8cf;border-color:#70905d}.how-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:17px;border-top:1px solid var(--how-line);padding-top:9px}.how-save{font-size:10px;color:#637359}.how-small{font-size:11px;color:#66705a;line-height:1.5;margin:12px 0}.how-notes{margin-top:14px;border-top:1px solid var(--how-line);padding-top:11px;font-size:12px}.how-notes summary{cursor:pointer;font-weight:800}.how-notes p{font-size:12px}.how-text-link{color:#416a45;text-decoration:underline;font-size:11px}.how-success{margin-top:15px;padding:17px;border:1px solid #c0d0aa;border-radius:14px;background:#e3ebd3;text-align:center}.how-success>.how-icon{width:34px;height:34px}.how-success h3{margin:6px 0;font-size:19px}.how-success p{font-size:13px;margin:0}.how-reset-confirm{border:1px solid #bca16c;padding:12px;margin-top:10px;border-radius:10px;background:#efe2c1;font-size:12px}.how-reset-confirm p{margin-top:0}.how-secondary{min-height:40px;border:1px solid #8b7951;border-radius:8px;background:#fff7e5;color:#594c32;padding:7px 12px;margin-right:10px}.how-compost-scene+.how-tools{grid-template-columns:repeat(5,minmax(0,1fr))}
.how-tools.has-five-tools{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(min-width:1100px){.hands-on-workshops{right:30px;width:410px}.how-title{font-size:27px}}
@media(max-width:700px){.hands-on-workshops{top:auto;right:8px;left:8px;bottom:8px;width:auto;max-height:min(72dvh,650px);border-radius:19px;box-shadow:0 9px 40px #172d2560}.how-header{padding:16px 18px 12px;border-radius:18px 18px 0 0}.how-title{font-size:23px;margin-bottom:5px}.how-header .how-pause{position:absolute;right:17px;top:13px;max-width:88px;font-size:10px!important;text-align:right}.how-title{max-width:calc(100% - 60px)}.how-eyebrow{max-width:calc(100% - 96px);font-size:9px}.how-body{padding:0 16px 16px}.how-live{padding:9px 16px 0;font-size:11px;min-height:27px}.how-intro{font-size:12px;margin:10px 0 13px}.how-target{height:153px}.how-mini-scene{transform:scale(.9);transform-origin:50% 30%;inset:5px 0 26px}.how-tools{gap:5px;margin:12px 0 10px}.how-tool{min-height:63px;font-size:10px!important}.how-steps{margin-bottom:12px}.how-steps li{font-size:10px}.how-primary{min-height:45px}.how-footer{margin-top:13px}.how-save{font-size:10px}.how-scene-line{font-size:10px}.how-pause{min-height:32px}}
@media(max-width:370px){.how-tool{font-size:9px!important}.how-title{font-size:21px}.how-steps li{font-size:9px}.how-body{padding-inline:12px}.how-header{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.hands-on-workshops *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:700px){.hands-on-workshops{max-height:min(62dvh,650px)}body:has(.hands-on-workshops:not([hidden])) #title{visibility:hidden}}
.how-wood-checks{border:1px solid #c9b99c;border-radius:12px;padding:12px;margin:12px 0}.how-wood-checks legend{font-weight:700}.how-wood-checks label{display:flex;gap:10px;margin:10px 0;align-items:flex-start}.how-wood-checks input{width:20px;height:20px;flex:none;accent-color:#346144}.how-planter{position:relative;display:block;width:150px;height:70px;transform:skewY(-7deg);border:7px solid #8b643e;border-bottom-width:10px;background:#e7d8ba}.how-planter i{display:none;position:absolute;bottom:0;top:0;width:21%;background:repeating-linear-gradient(8deg,#9d774d,#c6a075 4px,#b18b60 6px)}.how-planter.has-base i{display:block}.how-planter i:nth-child(1){left:2%}.how-planter i:nth-child(2){left:27%}.how-planter i:nth-child(3){left:52%}.how-planter i:nth-child(4){left:77%}.how-planter.has-walls{border-width:18px 12px 22px;box-shadow:0 8px 0 #795535}.how-planter.is-fastened:after{content:'·       ·';position:absolute;color:#443c32;font-size:36px;font-weight:900;left:0;right:0;bottom:-30px}.how-wood-scene{display:grid;place-items:center;min-height:110px}

.hands-on-workshops[data-workshop="wood-planter"] .how-steps{grid-template-columns:repeat(5,minmax(0,1fr))}