.color-region-highlight-layer {
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  pointer-events:none;border-radius:inherit;
  animation:color-region-breathe 1.8s ease-in-out infinite;
  will-change:opacity;
}
@keyframes color-region-breathe {0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce) {
  .color-region-highlight-layer {animation:none;opacity:1;will-change:auto;}
}
.replace-color-flow .replace-color-field {min-width:0;display:grid;gap:6px;color:#58667a;font-size:11px;font-weight:750;}
.replace-color-field-heading {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;}
.replace-color-region-button {min-height:36px;padding:6px 9px;border:1px solid #a81250;border-radius:8px;background:#ea0a67;color:#c99fb0;font:inherit;font-weight:650;cursor:pointer;}
.replace-color-region-button:disabled {opacity:.45;cursor:default;}
.replace-color-dialog .color-picker-heading > div {min-width:0;}
.replace-color-dialog .color-picker-heading > button {flex:0 0 auto;min-width:54px;min-height:44px;white-space:nowrap;}
.replace-color-field > .replace-color-select-wrap {min-width:0;min-height:48px;height:auto;padding:6px 8px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:7px;background:#f8fbfa;border:1px solid #6d0530;border-radius:10px;}
.replace-color-field .replace-color-select-wrap > i {width:32px;height:32px;align-self:center;border:1px solid #283c3729;border-radius:8px;}
.color-region-preview-dialog {width:min(760px,100%);max-height:calc(100dvh - 24px);box-sizing:border-box;padding:20px;display:grid;gap:14px;overflow:auto;background:#fff;border:1px solid #780635;border-radius:20px;color:#24314b;}
.color-region-preview-dialog h2 {margin:0 0 12px;font-size:23px;line-height:1.4;}
.color-region-preview-color {display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:14px;}
.color-region-preview-color > i {width:28px;height:28px;border:1px solid #700a35;border-radius:7px;}
.color-region-preview-color > strong {font-size:18px;}
.color-region-preview-color > span {color:#3a1826;}
.color-region-preview-dialog > p {margin:0;color:#3a1826;font-size:14px;line-height:1.7;}
.color-region-preview-viewport {min-width:0;min-height:100px;padding:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f8fbf9;border:1px solid #7f0538;border-radius:12px;}
.color-region-preview-image {position:relative;width:min(100%,calc(54dvh * var(--region-aspect)));line-height:0;}
.color-region-preview-image > canvas:not(.color-region-highlight-layer) {display:block;width:100%;height:auto;background:#fff;}
.color-region-preview-return {min-height:46px;padding:10px 18px;border:1px solid #ab1755;border-radius:10px;background:#f50a6c;color:#c99fb0;font:inherit;font-weight:700;cursor:pointer;}
.color-region-preview-dialog button:focus-visible,.replace-color-region-button:focus-visible {outline:2px solid #cea1b3;outline-offset:2px;}
@media(max-width:600px) {
  .color-region-preview-dialog {padding:16px;gap:12px;}
  .color-region-preview-dialog h2 {font-size:21px;}
  .replace-color-region-button {min-height:44px;font-size:12px;}
}