.pattern-preview.tab-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}.tab-badge{position:absolute;top:8px;right:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--tab-accent,rgba(255,255,255,.92));font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.tab-bar{position:relative;display:grid;grid-template-columns:repeat(var(--tab-count),1fr);margin:0;padding:0;border:none;background:none;width:100%;max-width:320px}.tab-bar legend.visually-hidden{white-space:nowrap}.tab-bar input,.tab-bar legend.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tab-bar input{pointer-events:none}.tab-bar label{position:relative;z-index:1;padding:10px 6px;text-align:center;cursor:pointer;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:rgba(226,232,240,.6);transition:color var(--tab-duration,.26s) ease}.tab-bar input:focus-visible+label{outline:2px solid var(--tab-accent,#67e8f9);outline-offset:2px;border-radius:6px}.tab-bar--underline{border-bottom:1px solid rgba(248,250,252,.08);padding-bottom:2px}.tab-bar--underline input:checked+label{color:var(--tab-accent,#7dd3fc)}.tab-bar--underline:after{content:"";position:absolute;bottom:0;left:0;width:calc(100% / var(--tab-count));height:2px;background:var(--tab-accent,#7dd3fc);border-radius:999px;transform:translateX(calc(100% * var(--tab-active, 0)));transition:transform var(--tab-duration,.26s) cubic-bezier(.2,.8,.2,1);box-shadow:0 0 8px color-mix(in srgb,var(--tab-accent,#7dd3fc) 40%,transparent)}.tab-bar--pill{padding:4px;background:rgba(15,23,42,.5);border-radius:999px;border:1px solid rgba(248,250,252,.08)}.tab-bar--pill label{padding:8px 6px;border-radius:999px}.tab-bar--pill input:checked+label{color:#f0fdfa}.tab-bar--pill:after{content:"";position:absolute;inset:4px;width:calc((100% - 8px) / var(--tab-count));border-radius:999px;background:color-mix(in srgb,var(--tab-accent,#f0abfc) 26%,#0f172a);box-shadow:0 0 14px color-mix(in srgb,var(--tab-accent,#f0abfc) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--tab-accent,#f0abfc) 70%,transparent);transform:translateX(calc(100% * var(--tab-active, 0)));transition:transform var(--tab-duration,.3s) cubic-bezier(.2,.8,.2,1);z-index:0}.tab-bar--notch{padding-bottom:16px;border-bottom:1px solid rgba(248,250,252,.05)}.tab-bar--notch input:checked+label{color:var(--tab-accent,#fde047)}.tab-bar--notch:before{bottom:8px;height:6px;background:radial-gradient(circle 3px at 50% 50%,var(--tab-accent,#fde047) 0,var(--tab-accent,#fde047) 60%,transparent 65%);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tab-accent,#fde047) 70%,transparent))}.tab-bar--notch:after,.tab-bar--notch:before{content:"";position:absolute;left:0;width:calc(100% / var(--tab-count));transform:translateX(calc(100% * var(--tab-active, 0)));transition:transform var(--tab-duration,.34s) cubic-bezier(.2,.8,.2,1)}.tab-bar--notch:after{bottom:0;height:1px;background:linear-gradient(to right,transparent 35%,color-mix(in srgb,var(--tab-accent,#fde047) 65%,transparent) 50%,transparent 65%)}@media (prefers-reduced-motion:reduce){.tab-bar label,.tab-bar:after,.tab-bar:before{transition:none}}