.pattern-preview.fill-preview{display:grid;place-items:center;min-height:168px;padding:18px;overflow:hidden;isolation:isolate}.pattern-preview.fill-preview.pattern-preview--inspector{min-height:220px;padding:32px}.fill-target{display:inline-flex;align-items:center;justify-content:center;min-inline-size:10rem;padding:.7rem 1rem;border:1px solid color-mix(in srgb,var(--fill-accent-a) 42%,transparent);border-radius:999px;color:var(--fill-text);background-repeat:no-repeat;font-size:.9rem;font-weight:800;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-position var(--fill-duration) cubic-bezier(.2,.8,.2,1),color var(--fill-duration) ease,border-color var(--fill-duration) ease}.fill-target--rise{min-inline-size:8rem;padding:.56rem .74rem;border-radius:12px;background-image:linear-gradient(0deg,var(--fill-accent-a) 0 50%,var(--fill-base) 50% 100%);background-size:100% var(--fill-overscan);background-position:0 0}.fill-target--sweep{background-image:linear-gradient(90deg,var(--fill-accent-a) 0 46%,var(--fill-accent-b) 50%,var(--fill-base) 54% 100%);background-size:var(--fill-overscan) 100%;background-position:100% 0}.fill-target--diagonal{min-inline-size:8.8rem;background-image:linear-gradient(135deg,var(--fill-accent-a) 0 34%,var(--fill-accent-b) 50%,var(--fill-base) 58% 100%);background-size:var(--fill-overscan) var(--fill-overscan);background-position:100% 100%}.fill-target:is(:hover,:focus-visible){color:var(--fill-active-text);border-color:color-mix(in srgb,var(--fill-accent-a) 72%,transparent)}.fill-target--rise:is(:hover,:focus-visible){background-position:0 100%}.fill-target--sweep:is(:hover,:focus-visible){background-position:0 0}.fill-target--diagonal:is(:hover,:focus-visible){background-position:0 0}.fill-target:focus-visible{outline:2px solid var(--fill-accent-a);outline-offset:3px}.fill-preview:not(.pattern-preview--inspector) .fill-target{animation-duration:2.8s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-iteration-count:infinite}.fill-preview:not(.pattern-preview--inspector) .fill-target--rise{animation-name:fillSweepRiseStage}.fill-preview:not(.pattern-preview--inspector) .fill-target--sweep{animation-name:fillSweepHorizontalStage}.fill-preview:not(.pattern-preview--inspector) .fill-target--diagonal{animation-name:fillSweepDiagonalStage}@keyframes fillSweepRiseStage{0%,18%,to{color:var(--fill-text);background-position:0 0}42%,72%{color:var(--fill-active-text);background-position:0 100%}}@keyframes fillSweepHorizontalStage{0%,18%,to{color:var(--fill-text);background-position:100% 0}42%,72%{color:var(--fill-active-text);background-position:0 0}}@keyframes fillSweepDiagonalStage{0%,18%,to{color:var(--fill-text);background-position:100% 100%}42%,72%{color:var(--fill-active-text);background-position:0 0}}@media (prefers-reduced-motion:reduce){.fill-target{transition-duration:0s}.fill-preview:not(.pattern-preview--inspector) .fill-target{animation:none;color:var(--fill-active-text)}.fill-preview:not(.pattern-preview--inspector) .fill-target--rise{background-position:0 100%}.fill-preview:not(.pattern-preview--inspector) .fill-target--diagonal,.fill-preview:not(.pattern-preview--inspector) .fill-target--sweep{background-position:0 0}}