.cw-stage {position:relative;}
.cw-overlay {position:absolute;z-index:6;pointer-events:none;overflow:hidden;fill:none;}
.cw-overlay.is-open {pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;}
.cw-overlay:focus:not(:focus-visible) {outline:none;}
.cw-overlay:focus-visible {outline:1px solid #2698f2;outline-offset:-1px;}
.cw-overlay[data-mode="select"] {cursor:default;}
.cw-line {fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none;}
.cw-guide {stroke:#7e95a5;stroke-width:1;opacity:.5;}
.cw-final {stroke:#282824;stroke-width:2.6;}
.cw-line.is-selected {stroke:#2698f2;}
.cw-end {fill:white;stroke:#2698f2;stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none;}
.cw-toolbar {position:absolute;z-index:9;bottom:4px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;}
.cw-toolbar[hidden] {display:none;}
.cw-toolbar.is-open {padding:6px;border:1px solid #d4d2cc;border-radius:999px;background:#f3f0ec;box-shadow:0 5px 20px #22273814;width:max-content;}
.cw-toolbar button {font:inherit;font-size:12px;min-height:32px;padding:5px 9px;border:0;border-radius:24px;background:transparent;color:#222738;cursor:pointer;box-shadow:none;}
.cw-toolbar .cw-tool:not(:disabled) {background:#fff;color:#222738;box-shadow:0 2px 4px #22273829;}
.cw-toolbar .cw-tool:not(:disabled):hover {box-shadow:0 5px 7px #22273847;}
.cw-toolbar .cw-tool[aria-pressed="true"] {background:#fff;box-shadow:inset 0 0 0 2px #2698f2,0 2px 4px #22273829;}
.cw-toolbar .cw-tool[aria-pressed="true"]:hover {box-shadow:inset 0 0 0 2px #2698f2,0 5px 7px #22273847;}
.cw-toolbar button:focus-visible {outline:2px solid #2698f2;outline-offset:3px;}
.cw-toolbar .cw-tool:disabled {background:#ece8e2;color:#848893;opacity:1;cursor:default;}
.cw-toolbar .cw-tool[data-tool="guide"] {color:#7e95a5;}
.cw-toolbar:not(.is-open) > .cw-toggle {width:48px;min-width:48px;height:48px;padding:12px;background:var(--round-control-bg,rgba(255,255,255,.9));border:1px solid rgba(255,255,255,.96);border-radius:50%;box-shadow:var(--round-control-shadow,0 5px 14px #0002);}
.cw-toolbar:not(.is-open) > .cw-toggle svg {width:22px;height:22px;}
.cw-tools {display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center;}
.cw-tools[hidden],.cw-confirm[hidden] {display:none;}
.cw-status {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);font-size:12px;color:#79818b;}
.cw-confirm {display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap;justify-content:center;width:100%;}
.cw-toolbar .cw-icon-button {width:32px;min-width:32px;padding:5px;}
.cw-icon-button svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;}
.cw-toolbar.is-open > .cw-toggle,
.cw-toolbar.is-open > .cw-toggle:is(:hover,:focus-visible,:active) {width:28px;min-width:28px;padding:4px;margin-left:3px;border:0;border-radius:0;background:transparent;box-shadow:none;}
.cw-toolbar.is-open > .cw-toggle:is(:hover,:focus-visible) svg {stroke-width:2.4;}

@media(pointer:coarse){
 .cw-toolbar button {min-height:40px;padding:6px 10px;}
 .cw-toolbar .cw-icon-button,.cw-toolbar.is-open > .cw-toggle {width:40px;min-width:40px;}
}
@media(max-width:700px){.cw-toolbar {bottom:4px;max-width:calc(100% - 24px);}}

.cw-tooltip {position:absolute;bottom:calc(100% + 9px);transform:translateX(-50%);width:max-content;z-index:90;}
.cw-tooltip[hidden],.cw-palette[hidden] {display:none;}
.cw-palette {position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:7px;border:1px solid #d4d2cc;border-radius:999px;background:#ede9e4;box-shadow:0 4px 14px #22273818;}
.cw-toolbar .cw-swatch {min-width:28px;width:28px;min-height:28px;height:28px;padding:0;border:3px solid #ede9e4;border-radius:50%;background:var(--cw-color);box-shadow:0 0 0 1px #c3c5c8;}
.cw-toolbar .cw-swatch:is(:hover,[aria-pressed="true"]) {background:var(--cw-color);border-color:#fff;box-shadow:0 0 0 2px #222738;}
.cw-toolbar .cw-auto-color,.cw-toolbar .cw-auto-color:is(:hover,[aria-pressed="true"]) {background:linear-gradient(135deg,#8d9ba5 50%,#282824 50%);}
@media(pointer:coarse){.cw-toolbar .cw-swatch {min-width:36px;width:36px;min-height:36px;height:36px;}}
