.pattern-preview.conic-preview{--conic-size:96px;--conic-mask-thickness:18%;--conic-duration:1.1s;--conic-background:conic-gradient(from 180deg,rgba(103,232,249,0.98) 0deg 90deg,rgba(103,232,249,0) 90deg 360deg);--conic-track:rgba(103,232,249,0.18);display:grid;align-content:center;place-items:center;padding:18px;height:180px;overflow:hidden;isolation:isolate}.pattern-preview.conic-preview.pattern-preview--inspector{height:auto;min-height:240px;padding:32px}.conic-ring{width:var(--conic-size);height:var(--conic-size);border-radius:50%;background:var(--conic-background),var(--conic-track);background-repeat:no-repeat;-webkit-mask:radial-gradient(circle at center,transparent calc(50% - var(--conic-mask-thickness) - .5px),black calc(50% - var(--conic-mask-thickness)));mask:radial-gradient(circle at center,transparent calc(50% - var(--conic-mask-thickness) - .5px),black calc(50% - var(--conic-mask-thickness)));animation:conicSpin var(--conic-duration) linear infinite;transform-origin:center;display:block}.conic-preview:not(.pattern-preview--inspector) .conic-ring{animation-duration:1.2s}@keyframes conicSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.conic-ring{animation:none}}