.pattern-preview.segmented-preview{position:relative;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;grid-gap:10px;gap:10px;padding:14px;height:180px;overflow:hidden;isolation:isolate}.segmented-badge{position:absolute;top:8px;right:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--segment-accent,rgba(255,255,255,.9));font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.segmented{position:relative;display:grid;padding:4px;background:rgba(15,23,42,.75);border-radius:999px;border:1px solid rgba(248,250,252,.12);margin:0}.segmented legend.visually-hidden{white-space:nowrap}.segmented input,.segmented legend.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.segmented label{position:relative;z-index:1;padding:8px 14px;border-radius:999px;text-align:center;cursor:pointer;color:rgba(226,232,240,.55);font-size:.8rem;font-weight:700;transition:color var(--segment-duration,.26s) ease}.segmented input:checked+label{color:#f0fdfa}.segmented input:focus-visible+label{outline:2px solid var(--segment-accent,#67e8f9);outline-offset:4px}.segmented:before{content:"";position:absolute;border-radius:999px;background:color-mix(in srgb,var(--segment-accent,#67e8f9) 26%,#0f172a);box-shadow:0 0 14px color-mix(in srgb,var(--segment-accent,#67e8f9) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--segment-accent,#67e8f9) 70%,transparent);z-index:0}.segmented--horizontal{grid-template-columns:repeat(3,1fr);min-width:240px}.segmented--horizontal:before{top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);transform:translateX(calc(100% * var(--segment-active, 0)));transition:transform var(--segment-duration,.26s) cubic-bezier(.45,1.4,.5,1)}.segmented--vertical{grid-template-rows:repeat(3,1fr);grid-template-columns:1fr;width:140px;height:138px;border-radius:18px}.segmented--vertical label{padding:10px 16px;border-radius:14px}.segmented--vertical:before{left:4px;right:4px;top:4px;height:calc((100% - 8px) / 3);border-radius:14px;transform:translateY(calc(100% * var(--segment-active, 0)));transition:transform var(--segment-duration,.26s) cubic-bezier(.45,1.4,.5,1)}.segmented--asymmetric{grid-template-columns:1fr 2fr 1fr;width:280px;--inner-fr:68px}.segmented--asymmetric:before{top:4px;bottom:4px;left:4px;width:var(--inner-fr);transform:translateX(0);transition:transform var(--segment-duration,.3s) cubic-bezier(.45,1.4,.5,1),width var(--segment-duration,.3s) cubic-bezier(.45,1.4,.5,1)}.segmented--asymmetric[data-active=medium]:before{width:calc(var(--inner-fr) * 2);transform:translateX(var(--inner-fr))}.segmented--asymmetric[data-active=hi]:before{width:var(--inner-fr);transform:translateX(calc(var(--inner-fr) * 3))}@media (prefers-reduced-motion:reduce){.segmented label,.segmented:before{transition:none}}