.cr-ratios { margin-bottom: 12px; }
.cr-ratios .btn.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.cr-stage { position: relative; display: inline-block; max-width: 100%; overflow: hidden; border-radius: 8px; touch-action: none; user-select: none; background: repeating-conic-gradient(#e9eef3 0% 25%, #fff 0% 50%) 50% / 16px 16px; line-height: 0; }
.cr-stage img { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; }
.cr-box { position: absolute; border: 2px solid #fff; outline: 1px solid rgba(0,0,0,.35); box-shadow: 0 0 0 9999px rgba(15, 29, 44, .55); cursor: move;
  background-image: linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px);
  background-size: 33.333% 33.333%; background-position: -1px -1px; }
.cr-box:focus-visible { outline: 3px solid var(--brand); }
.cr-h { position: absolute; width: 18px; height: 18px; background: #fff; border: 2px solid var(--brand); border-radius: 50%; }
.cr-h[data-h="nw"] { left: -10px; top: -10px; cursor: nwse-resize; }
.cr-h[data-h="ne"] { right: -10px; top: -10px; cursor: nesw-resize; }
.cr-h[data-h="sw"] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.cr-h[data-h="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }
.cr-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin-top: 16px; }
@media (min-width: 640px) { .cr-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }