.shape-library{max-width:1440px;margin:auto;padding:1.5rem 1rem 3rem;color:#193743;font-family:system-ui,sans-serif;box-sizing:border-box}
.shape-library *{box-sizing:border-box}.shape-library a{color:#176867}.shape-hero{background:#183e49;border-radius:18px;color:#f5faf7;padding:2rem;margin:1.2rem 0 1.5rem}.shape-hero h1{font-size:clamp(1.7rem,3.2vw,2.65rem);line-height:1.15;max-width:23ch;margin:.4rem 0 1rem}.shape-hero p{max-width:85ch;line-height:1.6}.shape-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;margin:0 0 .5rem}.shape-stage{border-top:1px solid #62818a;padding-top:.8rem;font-size:.9rem}
.shape-layout{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(0,1.7fr);gap:1.4rem;align-items:start}.shape-browser,.shape-preview{border:1px solid #d3e0df;border-radius:16px;background:#fff;padding:1.3rem;min-width:0}.shape-browser h2,.shape-preview h2{margin:0 0 .8rem;font-size:1.4rem}.shape-library label{display:block;font-size:.85rem;font-weight:650;margin-bottom:.65rem}.shape-library input:not([type=checkbox]),.shape-library select{display:block;width:100%;min-height:44px;margin-top:.35rem;padding:.6rem .7rem;font:inherit;font-size:16px;border:1px solid #93abae;border-radius:7px;background:white;color:#193743}.shape-library button{min-height:44px;padding:.6rem .85rem;border:1px solid #8da9ac;border-radius:8px;background:#fff;color:#193743;font:inherit;cursor:pointer}.shape-library button:hover{background:#eef6f3}.shape-library :focus-visible{outline:3px solid #178478;outline-offset:3px}.shape-library [hidden]{display:none!important}
.shape-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;max-height:840px;overflow:auto;padding:.25rem}.shape-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:100%;min-width:0;font-size:.85rem!important;font-weight:650!important;overflow-wrap:anywhere}.shape-card[aria-pressed=true]{background:#e6f3ee;border:2px solid #218777;padding:calc(.6rem - 1px) calc(.85rem - 1px)}.shape-card canvas{display:block;width:100%;height:100px;pointer-events:none}.shape-card small{font-weight:400;color:#516d77;font-size:.72rem}.shape-count{color:#516d77;font-size:.85rem}.shape-preview-heading{display:flex;justify-content:space-between;gap:1rem;align-items:start}.shape-preview-heading>span{background:#edf4f1;border-radius:20px;padding:.4rem .75rem;font-size:.75rem;white-space:nowrap}.shape-view-toolbar,.shape-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.shape-view-toolbar button[aria-pressed=true]{background:#1c665f;color:white;border-color:#1c665f}.shape-canvases{display:grid;grid-template-columns:1.5fr 1fr;gap:.7rem;margin:1rem 0}.shape-canvases figure{margin:0;min-width:0}.shape-canvases canvas{display:block;width:100%;height:290px;border:1px solid #d9e5df;border-radius:10px;background:#f3f7f3}.shape-canvases figcaption{font-size:.78rem;color:#516d77;margin:.4rem 0}.shape-sizing{min-width:0;border:1px solid #c5d6d2;border-radius:10px;padding:1rem}.shape-sizing legend{font-weight:700;padding:0 .4rem}.shape-sizing p,.shape-note{font-size:.85rem;line-height:1.6}.shape-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.shape-checkbox{display:flex!important;align-items:center;gap:.5rem;min-height:44px;margin:0!important}.shape-checkbox input{width:20px;height:20px;accent-color:#1c665f}.shape-note{color:#516d77;border-left:3px solid #8daea2;padding-left:.8rem}#shape-dimension-error{color:#9b3e25}#shape-error{padding:1rem;border:1px solid #bc6254;background:#fff4ef}
@media(max-width:1000px){.shape-layout{grid-template-columns:minmax(230px,.8fr) minmax(0,1.5fr)}.shape-canvases{grid-template-columns:1fr}.shape-canvases canvas{height:230px}.shape-dimensions{grid-template-columns:1fr}.shape-grid{max-height:700px}}
@media(max-width:680px){.shape-hero{padding:1.3rem}.shape-layout{display:flex;flex-direction:column}.shape-browser,.shape-preview{width:100%;padding:1rem}.shape-grid{max-height:310px;grid-template-columns:repeat(3,minmax(0,1fr))}.shape-card{padding:.4rem!important;font-size:.75rem!important}.shape-card canvas{height:70px}.shape-card small{display:none}.shape-preview-heading{flex-wrap:wrap}.shape-canvases{grid-template-columns:1fr}.shape-canvases canvas{height:230px}.shape-dimensions{grid-template-columns:1fr}.shape-view-toolbar button{font-size:.85rem;padding:.5rem}.shape-library{padding:1rem .7rem 2rem}}