.drawing-demo{max-width:700px;padding:20px;border:2px solid var(--cyan);border-radius:24px;background:#251532;margin:20px 0}.drawing-demo h2{font-size:24px;margin:8px 0}.drawing-demo p{font-size:16px;line-height:1.4}.drawing-demo canvas{display:block;width:100%;aspect-ratio:1;background:white;border-radius:10px;touch-action:none}.drawing-demo [data-draw-preview]{display:block;width:100%;max-width:440px;height:auto;border-radius:12px}.drawing-demo-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.drawing-demo-tools button,.drawing-demo [data-draw-copy]{font:inherit;font-size:15px;padding:12px;border-radius:12px;background:#453053;color:white;border:1px solid #89759c;cursor:pointer;min-height:44px}.drawing-demo [data-draw-finish],.drawing-demo [data-draw-share]{background:var(--lime);color:#170d29;font-weight:800}.drawing-demo button:disabled{opacity:.5}.drawing-demo [hidden]{display:none!important}.drawing-demo input{width:100%;padding:10px;margin-top:10px}.drawing-demo :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.hero:has(.drawing-demo)>h1{font-size:32px;margin:12px 0}.hero:has(.drawing-demo)>.eyebrow,.hero:has(.drawing-demo)>.lead,.hero:has(.drawing-demo)>img{display:none}.hero:has(.drawing-demo){padding-top:0}@media(max-width:500px){.drawing-demo{padding:12px}.drawing-demo h2{font-size:22px}.drawing-demo .eyebrow{font-size:12px}.drawing-demo .note{font-size:12px}}
@media(max-width:500px){body:has(.drawing-demo) main{padding-top:12px}.hero:has(.drawing-demo)>h1{font-size:24px;margin:8px 0}.drawing-demo{margin:12px 0}.drawing-demo>p:not(.eyebrow):not(.note):not([data-draw-status]){display:none}.drawing-demo canvas{max-width:min(100%,calc(100svh - 460px));margin:auto}.drawing-demo .quisty-pen-colors{gap:6px;justify-content:center}.drawing-demo .quisty-pen-colors button{flex-basis:38px;width:38px;height:38px}.drawing-demo .quisty-pen-tools button{padding:8px 4px}.drawing-demo-tools{gap:6px;margin-top:6px}.drawing-demo-tools button{padding:9px;font-size:13px}}
.drawing-demo [data-draw-preview]{aspect-ratio:auto;object-fit:contain;margin-top:0}