@import url("./color-studio-v0690.css");
.pen-editor .preview-toolbar { flex-wrap:wrap; gap:6px; }
.pen-editor .side-switch { flex-wrap:nowrap; }
.pen-editor .side-switch button { min-height:44px; min-width:62px; }
.pen-editor .side-switch small { display:block; font-size:9px; line-height:1.2; }
.pen-editor .canvas-actions { flex-wrap:wrap; margin-left:auto; }
.pen-editor .pen-zoom { display:flex; align-items:center; gap:5px; width:auto; min-height:44px; padding-inline:8px; white-space:nowrap; font-size:11px; }
.pen-editor .pen-color-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.pen-editor .pen-color-choices .color-choice { min-width:0; min-height:44px; padding:8px; gap:6px; }
.pen-editor .pen-color-choices .color-check { display:none; }
.pen-editor .pen-color-choices .tote-swatch { width:19px; height:19px; flex:none; }
.pen-stage .print-area::before { content:attr(data-area-label); width:auto; left:50%; transform:translateX(-50%); top:-20px; padding:2px 4px; background:#ffffffdf; border-radius:4px; }
.pen-stage .print-area .selection { stroke-width:.22; stroke-dasharray:.65 .5; }
.pen-stage .print-area .handle { stroke-width:.22; }
.pen-editor .canvas-empty { padding:0; font-size:10px; white-space:nowrap; }
.pen-other-area { position:absolute; z-index:2; border:1px dashed #8a9795; box-sizing:border-box; }
.pen-other-area > svg { display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.pen-zone-tap { position:absolute; inset:-12px -4px; width:calc(100% + 8px); min-height:44px; padding:0; color:transparent; border:0; background:transparent; cursor:pointer; }
.pen-zone-tap::before { content:attr(aria-label); display:block; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); padding:2px 5px; font-size:9px; line-height:14px; color:var(--muted); background:#ffffffdd; white-space:nowrap; border-radius:4px; }
.pen-zone-tap:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.pen-stage.zoomed .print-area { left:calc((100% - var(--zoom-width,80%))/2) !important; top:calc((100% - var(--zoom-height,16%))/2) !important; width:var(--zoom-width,80%) !important; height:var(--zoom-height,16%) !important; background:#303333; }
.pen-stage.zoomed .pen-other-area { display:none; }
.pen-stage.no-guides .pen-other-area { border-color:transparent; }
.pen-stage.no-guides .pen-zone-tap::before { display:none; }
.pen-stage.moving-area .pen-zone-tap { pointer-events:none; }
@media(max-width:760px) { .pen-editor .preview-column { position:relative; top:auto; z-index:auto; } .pen-editor .preview-toolbar { height:auto; min-height:58px; } .pen-editor .pen-stage { max-width:min(100%,430px,max(150px,calc(100dvh - 260px))); } }
@media(max-width:600px) { .pen-editor .pen-color-choices .color-choice { font-size:12px; } .pen-editor .pen-color-choices .tote-swatch { width:15px; height:15px; } }