.shape-main{max-width:1240px}.shape-back{font:13px var(--pixel-font);color:#6c805d;display:inline-block;margin-top:18px}.shape-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0 22px}.shape-heading h1{font-size:36px;color:#344a35;margin:5px 0 8px}.shape-heading p{font-size:14px;color:#74806c;margin:0}.shape-heading .shape-eyebrow{font-size:9px;letter-spacing:1.5px;color:#8a957e}.shape-version{font:11px Arial;color:#788570;padding:8px 10px;border:1px solid #d2dccc}.shape-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:20px}.shape-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:15px 7px;background:#f3f5eb;border:1px solid #cdd8c0;color:#718167;transition:background .15s,border-color .15s,transform .15s;font:15px var(--pixel-font)}.shape-option svg{width:31px;height:31px}.shape-option:hover{background:#e8eedf;transform:translateY(-2px)}.shape-option[aria-pressed=true]{background:#dfe9d4;border-color:#718a61;box-shadow:inset 0 -3px #9cb58b;color:#3c5733}.shape-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:20px;align-items:start}.shape-panel{border:1px solid #c7d2bc;background:#f8f9f1;box-shadow:2px 3px 0 #dce3d2}.shape-options{padding:20px}.shape-options h2{font:23px var(--pixel-font);color:#3c5137;margin:0 0 19px}.shape-dimension{display:grid;grid-template-columns:1fr 65px;align-items:center;gap:7px;font:12px Arial;color:#66795a;margin:16px 0}.shape-dimension input[type=number]{width:65px;padding:7px 6px;color:#4a6040;background:#fffef6;border:1px solid #ccd6c1}.shape-dimension input[type=range]{grid-column:1/-1;width:100%;accent-color:#7e986e;margin:5px 0}.shape-dimension input:disabled{opacity:.48}.shape-fill{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 18px}.shape-fill button{background:#f1f4e8;color:#758369;border:1px solid #cdd6c1;padding:9px 5px;font:14px var(--pixel-font)}.shape-fill button[aria-pressed=true]{background:#dbe7cb;color:#405a34;border-color:#a5b99a}.shape-fill button:disabled{opacity:.65;cursor:default}.shape-select{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;font:12px Arial;color:#66795a;margin:16px 0}.shape-select select{max-width:150px;padding:8px 7px;background:#fffef6;border:1px solid #cbd5c0;color:#4a6040;font:12px Arial}.shape-select select:disabled{opacity:.45}.shape-check{display:flex;align-items:center;gap:6px;font:11px/1.5 Arial;color:#6c7d60}.shape-check input{accent-color:#789164}.shape-hint{font:11px/1.7 Arial;color:#849078;margin:20px 0 0}.shape-result{overflow:hidden;min-width:0}.shape-view-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.shape-view-header>p{margin:0;color:#738267;font:11px Arial}.shape-view-tabs{display:flex;gap:5px;align-items:center}.shape-view-tabs button{padding:7px 10px;background:#eef2e4;color:#6b7b60;border:1px solid #d1dbc6;font:13px var(--pixel-font)}.shape-view-tabs button[aria-pressed=true]{background:#dbe7cc;color:#405935;border-color:#a8bc9a}.shape-stage{position:relative;height:465px;background:#bcc7b2}.shape-stage>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.shape-stage>canvas[hidden]{display:none}.shape-control-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);max-width:90%;text-align:center;background:#293f3885;color:#fcfcf4;padding:7px 11px;font:10px/1.5 Arial;pointer-events:none;white-space:nowrap}#shapeBusy{position:absolute;inset:0;display:grid;place-items:center;background:#dce5d4e8;color:#526848;font:14px var(--pixel-font)}#shapeBusy[hidden]{display:none}.shape-layer{display:flex;gap:11px;align-items:center;padding:14px;background:#f1f4e8;border-top:1px solid #d7dfcb}.shape-layer>label:not(.shape-check){flex:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:11px Arial;color:#66795a}.shape-layer b{font-weight:500;color:#4d6740}.shape-layer input[type=range]{width:100%;accent-color:#7e986e;margin:3px 0 0}.shape-layer>button{background:#e2ead6;color:#536d45;border:1px solid #c2cfb4;width:27px;height:27px;font-size:18px}.shape-layer>button:disabled{opacity:.4}.shape-layer>.shape-check{align-self:end;margin-bottom:3px}.shape-plan-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid #dce3d2;font:11px Arial;color:#77856d}.shape-plan-tools>label:not(.shape-check){display:flex;align-items:center;gap:7px}.shape-plan-tools input[type=range]{width:85px;accent-color:#7e986e}.shape-plan-tools button{background:transparent;border:1px solid #cbd6bf;color:#627b51;padding:6px 8px;font:11px var(--pixel-font)}.shape-plan-tools[hidden]{display:none}.shape-hover{font:11px Arial;color:#6a7e5b;padding:0 14px;min-height:13px;margin:8px 0 0}.shape-status{font:12px/1.5 Arial;color:#916940;padding:0 14px;margin:0}.shape-status:empty{display:none}.shape-actions{display:flex;flex-wrap:wrap;gap:10px;padding:14px}.shape-actions button{padding:11px 15px;font:14px var(--pixel-font);background:#e9efdd;color:#4b6640;border:1px solid #b8c9a9}.shape-actions button:disabled{opacity:.5;cursor:wait}.shape-actions .shape-primary{background:#69845a;color:#fffcef;border-color:#526a44;box-shadow:inset 0 2px #acc29755,inset 0 -2px #0001}.shape-summary{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:15px;align-items:center;padding:20px 22px;margin:24px 0 14px}.shape-summary>div:not(.shape-material){display:grid;gap:5px;border-left:1px solid #d6dfca;padding-left:24px}.shape-summary b{font:25px var(--pixel-font);color:#4b6540}.shape-summary span{font:11px Arial;color:#819073}.shape-material{display:flex;align-items:center;gap:12px}.shape-material>div:last-child{display:grid;gap:5px}.shape-material strong{font:15px var(--pixel-font);color:#536f45}#shapeIcon{width:42px;height:42px;flex:none}#shapeIcon canvas{width:42px;height:42px;image-rendering:pixelated}.shape-footnote{font:11px/1.7 Arial;color:#86927b;margin-bottom:35px}.shape-options [hidden]{display:none!important}.shape-main button:focus-visible,.shape-main input:focus-visible,.shape-main select:focus-visible{outline:2px solid #7a9866;outline-offset:3px}@media(max-width:850px){.shape-picker{grid-template-columns:repeat(4,1fr)}.shape-option{flex-direction:row;padding:12px 7px;font-size:14px}.shape-option svg{width:24px;height:24px}.shape-layout{grid-template-columns:215px minmax(0,1fr)}.shape-view-header{flex-wrap:wrap}.shape-stage{height:425px}.shape-summary{grid-template-columns:1fr 1fr;gap:20px}.shape-summary>div:not(.shape-material){padding-left:14px}.shape-plan-tools{flex-wrap:wrap}}@media(max-width:620px){.shape-heading h1{font-size:30px}.shape-version{display:none}.shape-layout{grid-template-columns:1fr}.shape-options{display:grid;grid-template-columns:1fr 1fr;gap:0 17px;padding:18px}.shape-options h2,.shape-fill,.shape-hint{grid-column:1/-1}.shape-dimension{grid-template-columns:1fr 59px}.shape-dimension input[type=number]{width:59px}.shape-select{grid-column:1/-1}.shape-stage{height:365px}.shape-control-hint{white-space:normal;width:85%}.shape-summary{padding:16px}.shape-summary b{font-size:23px}.shape-actions button{flex:1}.shape-picker{gap:6px}.shape-option{flex-direction:column;gap:5px;font-size:13px}.shape-options .shape-check{grid-column:1/-1;margin:5px 0}.shape-view-tabs{margin-left:auto}}@media(prefers-reduced-motion:reduce){.shape-option{transition:none}.shape-option:hover{transform:none}}