.website-examples{background:var(--paper);color:var(--ink);--focus:#739f25;padding:48px 0 36px}.examples-intro{margin-bottom:18px}.examples-intro h2,.examples-intro h1{letter-spacing:var(--track-l);text-wrap:initial;margin:0;font:500 clamp(36px,4vw,56px)/1.05 Space,Arial,sans-serif}.examples-heading-mobile{display:none}.examples-heading-desktop{white-space:nowrap}.examples-browse{justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;display:flex}.examples-copy{flex-wrap:wrap;align-items:baseline;gap:24px;display:flex}.examples-copy p{margin:0;font-size:14px;line-height:1.5}.examples-copy p:first-child{font-weight:600}.examples-copy p:last-child{color:#53604e}.examples-controls{flex-shrink:0;align-items:center;gap:9px;display:flex}.examples-controls[hidden]{display:none}.examples-controls>span{color:var(--active-example-ink,#53604e);font-variant-numeric:tabular-nums;margin-right:14px;font-size:12px;transition:color .35s}.examples-controls button{border:1px solid var(--ink);width:48px;height:48px;color:var(--ink);background:0 0;border-radius:50%;padding:0;font:400 25px DM,Arial,sans-serif;transition:background-color .35s,border-color .35s,transform .2s}.examples-controls button:not(:disabled):hover{background:var(--active-example-color,var(--accent));transform:translateY(-2px)}#examples-next{background:var(--active-example-color,var(--accent));border-color:var(--active-example-color,var(--accent))}.examples-controls button:disabled{opacity:.28;cursor:default}.examples-grid:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.examples-grid{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a0ac96 transparent;grid-auto-columns:calc(31.746% - 22.8571px);grid-auto-flow:column;gap:24px;padding:4px 0 18px;scroll-padding:0;display:grid;overflow-x:auto}.example-card{scroll-snap-align:start;flex-direction:column;min-width:0;display:flex}.example-shot{background:var(--example-field);flex-shrink:0;padding:12px;display:block;position:relative;overflow:hidden}.example-shot .example-still{aspect-ratio:1.44;object-fit:cover;object-position:top;width:100%;height:auto;transition:transform .65s cubic-bezier(.22,1,.36,1)}.example-shot:hover .example-still{transform:scale(1.025)}.example-shot:after{content:"";border:2px solid var(--example-accent);opacity:0;pointer-events:none;transition:opacity .35s;position:absolute;inset:0}.example-card.is-active .example-shot:after{opacity:1}.example-shot .example-pan{aspect-ratio:auto;opacity:0;pointer-events:none;width:calc(100% - 24px);max-width:none;height:auto;transition:transform .45s,opacity .2s;position:absolute;top:12px;left:12px;transform:translateY(0)}.example-shot.is-previewing .example-pan{opacity:1;transform:translateY(calc(-1 * var(--preview-travel,0px)));will-change:transform;transition-duration:3.2s,.2s;transition-timing-function:cubic-bezier(.18,.05,.28,1),ease}.example-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:7px;margin-top:18px;display:flex}.example-meta h3{letter-spacing:var(--track-s);text-wrap:initial;margin:0;font:500 23px/1.2 Space,Arial,sans-serif}.example-meta span{color:#53604e;font-size:11px}.example-brand{color:#53604e;margin:7px 0 0;font-size:13px}.example-description{min-height:63px;margin:13px 0 16px;font-size:14px;line-height:1.5}.example-open{align-self:flex-start;align-items:center;gap:28px;min-height:44px;margin-top:10px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.example-open span,.examples-all span{transition:transform .25s;display:inline-block}.example-open:hover span,.examples-all:hover span{transform:translate(3px,-3px)}.examples-progress{background:#dce1d3;height:3px;margin-top:4px;overflow:hidden}.examples-progress span{background:var(--active-example-ink,var(--ink));transform-origin:0;width:100%;height:100%;transform:scaleX(var(--examples-progress,.6));transition:background-color .35s;display:block}.examples-bottom{justify-content:space-between;align-items:center;gap:20px;margin-top:8px;display:flex}.examples-bottom p{color:#53604e;margin:0;font-size:12px;line-height:1.4}.examples-all{color:var(--ink);white-space:nowrap;text-underline-offset:4px;justify-content:space-between;align-items:center;gap:14px;min-height:44px;font-size:14px;font-weight:600;text-decoration:underline;display:inline-flex}.website-examples-collection{padding-top:40px;padding-bottom:60px}.website-examples-collection .examples-intro{margin-bottom:28px}.website-examples-collection .examples-browse{margin-bottom:23px}.website-examples-collection .examples-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:48px 32px;overflow:visible}.website-examples-collection .examples-bottom{margin-top:28px}.website-examples-collection .example-open{margin-top:auto}.examples-breadcrumb{color:#53604e;align-items:center;gap:9px;min-height:32px;margin-bottom:18px;font-size:13px;display:flex}.examples-breadcrumb a{color:var(--ink);text-underline-offset:4px}@media (width>=761px) and (width<=1100px){.examples-grid{grid-auto-columns:calc(45.4545% - 21.8182px)}}@media (width<=900px){.examples-copy{display:block}.examples-copy p:last-child{margin-top:4px;font-size:13px}}@media (width<=760px){.website-examples{padding:28px 0 24px}.website-examples-collection{padding:20px 0 45px}.examples-grid{grid-auto-columns:86%;gap:18px;padding-bottom:8px}.example-meta h3{letter-spacing:var(--track-s);font-size:22px}.examples-controls{gap:7px}.examples-controls button{width:44px;height:44px}.examples-controls>span{margin-right:3px;font-size:11px}.examples-browse{flex-wrap:wrap;gap:12px;margin-bottom:12px}.examples-copy{width:100%}.examples-controls{margin-left:auto}.examples-intro{margin-bottom:16px}.examples-intro h2{letter-spacing:var(--track-m);font-size:clamp(26px,7vw,34px)}.examples-heading-desktop{display:none}.examples-heading-mobile{white-space:nowrap;display:inline}.examples-bottom{gap:12px}.examples-bottom p{font-size:12px}.examples-all{font-size:13px}.website-examples-collection .examples-intro{margin-bottom:25px}.website-examples-collection .examples-browse{margin-bottom:18px}.website-examples-collection .examples-grid{grid-template-columns:1fr;gap:36px}}@media (prefers-reduced-motion:reduce){.website-examples *{transition:none!important}.examples-grid{scroll-behavior:auto}.example-shot .example-pan{display:none}}