.pattern-preview.border-ring-preview{--ring-size:86px;--ring-thickness:7px;--ring-duration:0.9s;--ring-accent:rgba(103,232,249,0.95);--ring-track:rgba(103,232,249,0.18);--ring-accent-inner:rgba(244,191,255,0.9);--ring-accent-secondary:rgba(251,191,36,0.95);--ring-inner-inset:14px;position:relative;display:grid;align-content:center;place-items:center;padding:18px;height:180px;overflow:hidden;isolation:isolate}.pattern-preview.border-ring-preview.pattern-preview--inspector{height:auto;min-height:240px;padding:32px}.border-ring{position:relative;width:var(--ring-size);height:var(--ring-size);border-radius:50%;box-sizing:border-box;display:block}.border-ring-preview--classic .border-ring{border:var(--ring-thickness) solid var(--ring-track);border-top-color:var(--ring-accent);animation:borderRingSpin var(--ring-duration) linear infinite}.border-ring-preview--dual .border-ring{border-left-color:transparent;border-bottom:var(--ring-thickness) solid transparent;border-right:var(--ring-thickness) solid transparent;border-top-color:transparent;border-top:var(--ring-thickness) solid var(--ring-accent);border-left:var(--ring-thickness) solid var(--ring-accent);animation:borderRingSpin var(--ring-duration) linear infinite}.border-ring-preview--dual .border-ring:after{content:"";position:absolute;inset:var(--ring-inner-inset);border-radius:50%;border-left:var(--ring-thickness) solid transparent;border-bottom-color:transparent;border-right-color:transparent;border-top:var(--ring-thickness) solid transparent;border-bottom:var(--ring-thickness) solid var(--ring-accent-inner);border-right:var(--ring-thickness) solid var(--ring-accent-inner);box-sizing:border-box;animation:borderRingSpinReverse var(--ring-duration) linear infinite}.border-ring-preview--twoTone .border-ring{border:var(--ring-thickness) solid var(--ring-accent);border-right-color:var(--ring-accent-secondary);border-bottom-color:var(--ring-accent-secondary);animation:borderRingSpin var(--ring-duration) linear infinite}.border-ring-preview:not(.pattern-preview--inspector) .border-ring,.border-ring-preview:not(.pattern-preview--inspector) .border-ring:after{animation-duration:1.2s}@keyframes borderRingSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes borderRingSpinReverse{0%{transform:rotate(0deg)}to{transform:rotate(-2turn)}}@media (prefers-reduced-motion:reduce){.border-ring,.border-ring:after{animation:none}}