.draw-page:where(.astro-4YL55RIH){max-width:1200px;margin:0 auto;padding:2rem 1rem 3rem}.draw-header:where(.astro-4YL55RIH) h1:where(.astro-4YL55RIH){margin:0 0 .25rem;font-size:clamp(1.8rem,4vw,2.4rem)}.draw-header:where(.astro-4YL55RIH) p:where(.astro-4YL55RIH){margin:0 0 1rem;color:var(--text-muted)}.draw-controls:where(.astro-4YL55RIH){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;align-items:end;margin-bottom:.8rem}.control:where(.astro-4YL55RIH){display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--text-muted)}.control:where(.astro-4YL55RIH) input:where(.astro-4YL55RIH),.control:where(.astro-4YL55RIH) select:where(.astro-4YL55RIH),button:where(.astro-4YL55RIH){font:inherit;padding:.45rem .55rem;border:1px solid var(--lightBorder);border-radius:6px;background:#fff;color:var(--text)}#colorInput:where(.astro-4YL55RIH){padding:.15rem;min-height:2.2rem}button:where(.astro-4YL55RIH){font-weight:700;cursor:pointer}.canvas-wrap:where(.astro-4YL55RIH){border:1px solid var(--lightBorder);border-radius:10px;overflow:auto;background:linear-gradient(45deg,#f7f7f7 25%,transparent 25%),linear-gradient(-45deg,#f7f7f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f7f7f7 75%),linear-gradient(-45deg,transparent 75%,#f7f7f7 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}canvas:where(.astro-4YL55RIH){display:block;width:100%;max-width:100%;touch-action:none;cursor:crosshair;background:#fff}.draw-help:where(.astro-4YL55RIH){margin-top:.7rem;font-size:.9rem;color:var(--text-muted)}@media (max-width: 900px){.draw-controls:where(.astro-4YL55RIH){grid-template-columns:repeat(3,minmax(0,1fr))}}