[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:#eef4f2;color:#234b4a;font:16px/1.55 system-ui}header{padding:22px 5vw;border-bottom:1px solid #c3d8d3;display:flex;justify-content:space-between}header b{letter-spacing:.18em}header span{font-size:13px}main{max-width:1120px;margin:auto;padding:32px 24px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#8c6d2d;font-weight:800}h1{font:500 clamp(38px,5vw,60px)/1.08 Georgia;margin:15px 0}.lead{max-width:820px}h2{font:500 26px/1.2 Georgia}nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:25px 0}button,select,input{font:inherit;min-height:44px;padding:10px 13px;border:1px solid #8daea7;background:#fffdf5;border-radius:7px;color:#234b4a}button{cursor:pointer}button:hover{background:#d9eae2}button:disabled{opacity:.45}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b78536;outline-offset:2px}.brief{padding:20px;background:#dfeae2;border-radius:14px}.brief h2{margin-top:0}#states{display:flex;gap:20px;margin:25px 0}.state{flex:1;min-width:0;padding:20px;background:#fffdf6;border:1px solid #b6cec4;border-radius:14px}.gate{width:110px;height:110px;background-image:url('workshop.webp');background-size:200% 200%;background-position:0 100%;margin:auto;border-radius:12px}.state h2{margin:12px 0}.state p{font-size:13px;min-height:40px}.state label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0}.state select{width:100px}.state input{width:22px;height:22px;min-height:22px;accent-color:#366b65}.testing{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;margin-bottom:25px}.testing>div{background:#fffdf6;padding:22px;border:1px solid #b6cec4;border-radius:14px}.testing h2{margin-top:0}#examples{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.example{padding:6px 10px;border:1px solid #c9d9d1;border-radius:7px;font:13px ui-monospace,monospace}.good{background:#e0edd9}.bad{background:#f4d6c8}.primary{background:#2d6664;color:white}.primary:hover{background:#437c78}#feedback{font-weight:700}#trail{width:100%;margin:8px 0}.small{font-size:13px;color:#58736b}#traceout{font:15px/1.8 ui-monospace,monospace;overflow-wrap:anywhere}details{padding:18px;border:1px solid #c2d6ce;border-radius:10px;font-size:14px}summary{font-weight:700;cursor:pointer}footer{font-size:13px;color:#58736b;margin:25px 0}@media(max-width:720px){main{padding:24px 14px}header span{display:none}h1{font-size:40px}#states{flex-direction:column}.state{display:grid;grid-template-columns:100px 1fr;gap:0 16px;padding:16px}.gate{width:100px;height:100px;grid-row:1/4}.state p{min-height:0;margin:0}.state h2{margin-top:0}.state label{margin:5px 0}.state label:last-child{grid-column:1/-1}.testing{grid-template-columns:1fr}.testing>div{padding:16px}nav label{width:100%}}

@media(max-width:720px){.state label:not(:last-child){grid-column:2}.state label:last-child{grid-column:1/-1}}