[data-brackets] {
  --brk-c: var(--color-text-accent); --brk-arm: var(--space-2); --brk-th: var(--space-0-5);
  --brk-px: var(--space-3); --brk-py: 0px;
  --_bx: 0px; --_by: 0px; --_bw: 0px; --_bh: 0px;
  position: relative;
}
[data-brackets="sm"] { --brk-arm: 6px; --brk-px: var(--space-2); --brk-py: calc(var(--space-2) * -1); }

[data-brackets]::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: calc(var(--_bw) + var(--brk-px) * 2); height: calc(var(--_bh) + var(--brk-py) * 2);
  transform: translate(calc(var(--_bx) - var(--brk-px)), calc(var(--_by) - var(--brk-py))); opacity: 0;
  background:
    linear-gradient(var(--brk-c), var(--brk-c)) top left / var(--brk-arm) var(--brk-th) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) top left / var(--brk-th) var(--brk-arm) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) top right / var(--brk-arm) var(--brk-th) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) top right / var(--brk-th) var(--brk-arm) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) bottom left / var(--brk-arm) var(--brk-th) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) bottom left / var(--brk-th) var(--brk-arm) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) bottom right / var(--brk-arm) var(--brk-th) no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) bottom right / var(--brk-th) var(--brk-arm) no-repeat;
  transition: transform 380ms var(--motion-easing-standard), width 380ms var(--motion-easing-standard), height 380ms var(--motion-easing-standard), opacity var(--motion-duration-base) var(--motion-easing-standard);
}
[data-brackets].is-brk::after { opacity: 1; }
[data-brackets].is-brk-snap::after { transition: opacity var(--motion-duration-base) var(--motion-easing-standard); }

@media (prefers-reduced-motion: reduce) {
  [data-brackets]::after { transition: none; }
}