.td-examples{padding:clamp(5.5rem,9vw,9rem) 0}.example-showcase{position:relative;padding-bottom:2.75rem}.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}.example-nav{position:absolute;top:calc(50% - 1.4rem);z-index:3;display:grid;width:2.75rem;height:5rem;padding:0;place-items:center;color:#1d2a3d94;background:transparent;border:0;cursor:pointer;transform:translateY(-50%);transition:color .18s ease}.example-nav-previous{left:-4rem}.example-nav-next{right:-4rem}.example-nav svg{width:1.25rem;height:2.25rem;overflow:visible;transition:transform .18s ease}.example-nav path{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.example-item{--example-card-padding: clamp(1.5rem, 4vw, 3rem);--example-slide-delay: 0ms;position:relative;min-height:330px;padding:var(--example-card-padding);overflow:hidden;background:#ffffff7a;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}.example-item:hover,.example-item:focus-visible{background:#ffffffb8}.example-item:focus-visible{z-index:2;outline:2px solid var(--teal);outline-offset:-3px}.example-item:nth-child(2){--example-slide-delay: 55ms}.example-item:nth-child(3){--example-slide-delay: .11s}.example-item:nth-child(4){--example-slide-delay: 165ms}.example-item-content{position:relative;width:100%;opacity:1;transform:translateZ(0);transition:opacity .32s ease,transform .44s cubic-bezier(.22,.8,.3,1);will-change:opacity,transform}.example-item-content.is-exiting{opacity:0;transform:translate3d(-112%,0,0);transition-delay:var(--example-slide-delay)}.example-grid[data-transition-direction=previous] .example-item-content.is-exiting{transform:translate3d(112%,0,0)}.example-item-content.is-entering{position:absolute;inset:var(--example-card-padding);width:auto;opacity:0;pointer-events:none;transform:translate3d(112%,0,0)}.example-grid[data-transition-direction=previous] .example-item-content.is-entering{transform:translate3d(-112%,0,0)}.example-item-content.is-entering.is-entering-active{opacity:1;transform:translateZ(0);transition-delay:var(--example-slide-delay)}.example-item-content.is-resetting{transition:none}.example-item-content>span{color:var(--teal);font-family:var(--font-mono);font-size:.67rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}.example-item h3{max-width:520px;margin-top:2rem;color:var(--ink-soft);font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.2}.example-item p{margin:2rem 0 0;color:var(--slate);font-family:var(--font-mono);font-size:.69rem}.example-item-content>strong{display:block;margin-top:.65rem;color:var(--ink-soft);font-size:.85rem}@media(hover:hover){.example-nav:hover{color:var(--teal)}.example-nav-previous:hover svg{transform:translate(-3px)}.example-nav-next:hover svg{transform:translate(3px)}}@media(min-width:901px)and (max-width:1408px){.example-nav-previous{left:-1.35rem}.example-nav-next{right:-1.35rem}}@media(max-width:900px){.example-grid{touch-action:pan-y}.example-nav{top:auto;bottom:-.5rem;width:3.25rem;height:3rem;transform:none}.example-nav-previous{left:0}.example-nav-next{right:0}.example-nav svg{width:.8rem;height:1.4rem}}@media(max-width:640px){.td-examples{padding:5rem 0}.example-grid{grid-template-columns:1fr}.example-item{--example-card-padding: 1.6rem;min-height:260px;padding:var(--example-card-padding)}.example-item h3{margin-top:1.4rem}}@media(prefers-reduced-motion:reduce){.example-item-content,.example-nav svg{transition:none}}