:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#20363a;background:#f0f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #bcc8bf;border-radius:7px;background:#f8faf4;color:#233e40;padding:9px 13px;font-size:12px;font-weight:650}button:hover{border-color:#35665a;background:#e4eddb}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #ce743d;outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#193338;color:#f1f4e9;padding:19px 30px}.brand{font-size:13px;letter-spacing:2px;font-weight:750;display:flex;gap:14px;align-items:center}.brand small{display:block;letter-spacing:1.4px;font-size:9px;color:#a6b9b2;margin-top:5px}.mark{font-family:Georgia,serif;font-size:40px;line-height:1;color:#d9e9b1}.header-actions{display:flex;gap:10px;align-items:center}.header-actions button{background:transparent;color:#e9f0e5;border-color:#54716f}.local{font-size:11px;color:#c8dbad;margin-right:10px}.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 160px)}aside{border-right:1px solid #cfd7cc;padding:30px 25px;background:#e8ede2}.section-title,.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:750;color:#637b70}h1{font-family:Georgia,serif;font-weight:400;font-size:36px;line-height:1.12;letter-spacing:-1.2px;margin:18px 0}h1 em{color:#52745b;font-weight:400}.intro{font-size:12px;line-height:1.7;margin:0 0 24px;color:#65766c}label{display:block;font-size:11px;font-weight:650;margin:17px 0}label b{float:right;font-weight:500;color:#647367}input:not([type=range]):not([type=color]):not([type=checkbox]),select{width:100%;border:1px solid #c1ccbd;border-radius:6px;padding:10px 8px;background:#f5f7ef;color:#233e40;margin-top:8px;font-size:12px}input[type=range]{width:100%;display:block;margin:12px 0 0;accent-color:#597650;height:5px}input[type=color]{width:47px;height:30px;border:1px solid #a2b3a4;padding:2px;background:none}.inline{display:flex;justify-content:space-between;align-items:center}.hint{font-size:10px;line-height:1.65;color:#6b7970;margin-top:8px}.checkbox{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500}.checkbox input{accent-color:#496e53}.rule{height:1px;background:#cbd5c4;margin:25px 0}.button-row{display:flex;gap:7px;margin-top:10px}.button-row button{flex:1;padding:9px 6px;font-size:11px}.stage{padding:30px 34px;max-width:1500px;width:100%;margin:auto}.stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font-family:Georgia,serif;font-size:28px;font-weight:400;margin:8px 0 22px}.pill{background:#e3ead6;border:1px solid #bdcda6;border-radius:30px;padding:8px 13px;font-size:10px;color:#536b3b;letter-spacing:1px;white-space:nowrap}.toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid #cbd3c7;padding:17px 0}.tabs{display:flex;gap:3px;background:#e3e8de;border-radius:6px;padding:3px}.tabs button{border:0;background:transparent;font-size:11px;padding:8px 13px}.tabs button.active{background:#fffef5;box-shadow:0 1px 4px #354d3d22}.swatches{display:flex;gap:7px}.swatch{width:23px;height:23px;padding:0;border-radius:50%;border:1px solid #a6b4a6}.swatch.picked{outline:2px solid #7b9279;outline-offset:3px}.checker{background:conic-gradient(#cbd3d1 25%,#ebefeb 0 50%,#cbd3d1 0 75%,#ebefeb 0);background-size:10px 10px}.white{background:#fff}.black{background:#000}.rose{background:#cda09a}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}figure{margin:0;border:1px solid #c4cfc3;background:#e8ede3;min-width:0;border-radius:9px;overflow:hidden}figcaption{font-size:10px;font-weight:650;letter-spacing:1px;display:flex;align-items:center;gap:8px;padding:12px 13px}figcaption span{font-size:9px;opacity:.5}figcaption small{margin-left:auto;font-size:9px;letter-spacing:0;font-weight:400;color:#6d7e70}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;touch-action:none;background:#dce3d9}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #cbd3c7;padding:22px 0;gap:15px}.metrics div{border-right:1px solid #d1d8cb}.metrics div:last-child{border:0}.metrics b{display:block;font-size:24px;font-family:Georgia,serif;font-weight:400}.metrics span{font-size:10px;color:#71806f}.inspector{display:flex;align-items:center;gap:18px;padding:20px 0}.cross{font-size:27px;color:#8f9d7b}.inspector b{font-size:11px}.inspector small{display:block;font-size:9px;color:#7e8b7a;margin:3px 0}.inspector code{font-size:11px;color:#375946}.inspector button{margin-left:auto;font-size:10px}.stage-hint{margin-top:0;max-width:850px}.status{font-size:11px;color:#4c6d57;padding:12px 14px;border-left:2px solid #91aa72;background:#e5eddc;min-height:40px;margin:17px 0}.export-row{display:flex;align-items:center;gap:10px;border-top:1px solid #cbd3c7;padding-top:22px}.export-row>div{margin-right:auto}.export-row strong{font-family:Georgia,serif;font-weight:400;font-size:18px}.export-row small{display:block;color:#71806f;font-size:10px;margin-top:5px}.primary{background:#274d41;color:#f1f3df;border-color:#274d41}.primary:hover{background:#3c6653;color:#fff}.project-row{display:flex;gap:10px;align-items:center;margin:17px 0 22px}.project-row button{border:0;background:none;font-size:10px;padding:0;text-decoration:underline}.project-row span{font-size:9px;color:#7c8a79;margin-left:auto}details{font-size:11px;color:#6a7a69;line-height:1.7}summary{cursor:pointer}details ol{padding-left:20px}footer{background:#e5eadd;border-top:1px solid #cbd3c7;display:flex;align-items:start;justify-content:space-between;gap:30px;padding:17px 30px}footer details{max-width:700px}footer span{font-size:9px;letter-spacing:1.5px;color:#71816b;padding-top:4px}footer button{margin:8px 8px 0 0}@media(min-width:1600px){.stage{padding-left:65px;padding-right:65px}.comparison{max-width:950px;margin:auto}}@media(max-width:1050px){.workspace{grid-template-columns:260px minmax(0,1fr)}aside{padding:25px 18px}.stage{padding:25px 20px}.tabs button{padding:7px;font-size:10px}.inspector{flex-wrap:wrap;gap:10px}.export-row{flex-wrap:wrap}.export-row>div{width:100%}.project-row{flex-wrap:wrap}.project-row span{width:100%;margin:0}.local{display:none}figcaption small{display:none}}@media(max-width:700px){header{padding:16px;gap:10px;align-items:start}.brand{font-size:10px;letter-spacing:1px}.brand small{font-size:7px}.mark{font-size:32px}.header-actions{flex-direction:column;gap:5px}.header-actions button{font-size:10px;padding:7px}.workspace{display:flex;flex-direction:column}aside{order:2;border:0;border-top:1px solid #cbd3c7;display:block}.stage{order:1;padding:22px 16px}h2{font-size:24px}.toolbar{flex-wrap:wrap;gap:16px}.comparison{gap:8px}figcaption{font-size:8px;padding:9px}.metrics{gap:8px}.metrics b{font-size:19px}.metrics span{font-size:9px}.inspector .cross{display:none}footer{flex-direction:column;padding:18px}.export-row button{font-size:10px}h1{font-size:30px}.intro{max-width:450px}footer>span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}h2{white-space:pre-wrap;overflow-wrap:anywhere}