.hcs{--hcs-purple:#6e42c8;--hcs-pink:#bd188f;max-width:1150px;margin:0 auto 30px;padding:22px;background:#fff9ff;border:1px solid #eadcf4;border-radius:22px;color:#242038;font-family:system-ui,Arial,sans-serif;box-sizing:border-box}.hcs *{box-sizing:border-box}.hcs-heading{text-align:center}.hcs-heading h2{margin:0 0 5px;font-size:clamp(26px,4vw,36px)}.hcs-heading p{margin:0 0 16px}.hcs-gallery,.hcs-tools,.hcs-actions,.hcs-palette{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center;margin:12px 0}.hcs button,.hcs-upload-label{appearance:none;cursor:pointer;border:2px solid #e2d3f3;border-radius:13px;background:white;color:#26203d;padding:10px 13px;font-size:14px;font-weight:650;line-height:1.25;min-height:42px}.hcs button:hover,.hcs-upload-label:hover{border-color:var(--hcs-purple)}.hcs button:focus-visible,.hcs-upload-label:focus-within,.hcs input:focus-visible{outline:3px solid #ffb000;outline-offset:2px}.hcs button.active{background:var(--hcs-purple);border-color:var(--hcs-purple);color:white}.hcs-tools{background:#f1eafa;padding:12px;border-radius:16px}.hcs-tools label{display:flex;align-items:center;gap:7px;font-weight:600}.hcs-color{height:38px;width:44px;cursor:pointer;border:0;background:transparent}.hcs-size{width:90px;accent-color:var(--hcs-purple)}.hcs-palette button{width:34px;height:34px;min-height:34px;border-radius:50%;padding:0;border:2px solid #888}.hcs-palette button.active{outline:3px solid #222;outline-offset:2px}.hcs-board{max-width:800px;margin:15px auto;background:white;border:3px solid #ddd1eb;border-radius:14px;overflow:auto;touch-action:pan-x pan-y;overscroll-behavior:contain;max-height:min(70vh,620px)}.hcs-canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;background:white}.hcs-actions .hcs-save{background:var(--hcs-pink);color:white;border-color:var(--hcs-pink)}.hcs-actions .hcs-print{background:var(--hcs-purple);color:white;border-color:var(--hcs-purple)}.hcs-upload-label{display:inline-flex;align-items:center}.hcs-status{text-align:center;font-weight:650;min-height:24px}.hcs-note{text-align:center;font-size:12px;color:#57506b}.hcs-zoom-label{min-width:45px;text-align:center;font-weight:700}@media(max-width:600px){.hcs{padding:10px;border-radius:12px}.hcs button,.hcs-upload-label{font-size:13px;padding:8px}.hcs-tools{gap:6px}.hcs-board{border-width:2px}}

.hcs-mode[data-mode="pan"]{border-color:#ad91dd}.hcs-board:focus-within{outline:2px solid #6e42c8}