.examples-page,.example-detail{width:min(var(--guide-frame,1160px), calc(100% - (2 * var(--resource-mobile-gutter,22px))));margin:0 auto;padding:clamp(48px,5vw,72px) 0 clamp(72px,7vw,104px)}.examples-page .page-intro{max-width:650px;padding:0 0 28px}.examples-page .trust-line{color:#9bb4bb;max-width:650px;margin:14px 0 0;font:500 14px/1.55 DM Sans,sans-serif}.examples-page .example h3{color:var(--paper);letter-spacing:-.035em;text-wrap:balance;margin:0;font:600 clamp(20px,2vw,27px)/1.16 Manrope,sans-serif}.examples-page .example-section{padding-bottom:clamp(16px,3vw,28px)}.examples-page .example-bento{gap:clamp(18px,2vw,24px);display:grid}.examples-page .example-bento__row{grid-template-columns:var(--example-columns);align-items:stretch;gap:clamp(18px,2vw,24px);display:grid}.examples-page .example{background:linear-gradient(145deg,#10c9e80b,#ffffff05 58%),#05161fad;border:1px solid #7de4ef21;border-radius:18px;flex-direction:column;min-width:0;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff09}.examples-page .example .comparison{margin:0}.examples-page .example-media{border-bottom:1px solid #7de4ef1a;flex:none;position:relative;overflow:hidden}.examples-page .example-media:after{content:"";z-index:4;pointer-events:none;background:linear-gradient(#0000,#020d13e0);height:38%;position:absolute;inset:auto 0 0}.examples-page .example-copy{flex-direction:column;flex:1;padding:clamp(18px,2.2vw,26px);display:flex}.examples-page .example-labels{flex-wrap:wrap;gap:8px 12px;margin:10px 0 0;padding:0;list-style:none;display:flex}.examples-page .example-labels li,.example-detail .example-labels li{color:#8faab2;letter-spacing:.04em;text-transform:lowercase;font:600 11px/1 Manrope,sans-serif}.examples-page .gallery-summary,.example-detail .gallery-summary{color:#d8e7e9;margin:10px 0 0;font:500 15px/1.5 DM Sans,sans-serif}.example-detail .credit{color:#5f7b83;margin:14px 0 0;font-size:11px;line-height:1.55}.example-detail .credit a{color:#78969e;text-underline-offset:2px;text-decoration:underline}.examples-page .example-caption{z-index:5;pointer-events:none;text-shadow:0 1px 8px #000c;gap:3px;display:grid;position:absolute;bottom:12px;left:14px;right:14px}.examples-page .example-caption__text{color:#f8fcfcf0;max-width:58ch;font:550 11px/1.35 DM Sans,sans-serif}.examples-page .credit{color:#ebf5f6b8;margin:0;font:500 9px/1.35 DM Sans,sans-serif}.examples-page .credit a{pointer-events:auto;color:#f6fcfce6;text-underline-offset:2px;-webkit-text-decoration:underline #f6fcfc6b;text-decoration:underline #f6fcfc6b}.examples-page .example-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.examples-page .example-header h3{flex:1}.examples-page .example-link{color:#cde6e9;white-space:nowrap;background:#10c9e80f;border:1px solid #7de4ef33;border-radius:9999px;flex-shrink:0;align-items:center;gap:5px;padding:4px 10px;font:600 12px/1.3 Manrope,sans-serif;text-decoration:none;transition:color .16s,border-color .16s,background .16s;display:inline-flex}.examples-page .example-link:hover,.examples-page .example-link:focus-visible{color:#fff;background:#10c9e829;border-color:#7de4ef73}.examples-page .example-link__arrow{color:var(--cyan-soft);justify-content:center;align-items:center;transition:transform .16s,color .16s;display:inline-flex}.examples-page .example-link__arrow svg{width:14px;height:14px}.examples-page .example-link:hover .example-link__arrow,.examples-page .example-link:focus-visible .example-link__arrow{color:#fff;transform:translate(1px,-1px)}.examples-page .example-link:focus-visible{outline:2px solid var(--coral);outline-offset:2px}.examples-page .visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.example-breadcrumbs ol{color:#7f9aa2;flex-wrap:wrap;gap:6px 10px;margin:0 0 28px;padding:0;font:500 13px/1.4 DM Sans,sans-serif;list-style:none;display:flex}.example-breadcrumbs li:not(:last-child):after{content:"/";color:#5f7b83;margin-left:10px}.example-breadcrumbs a{color:#9bb4bb;text-underline-offset:2px;text-decoration:underline}.example-detail__intro h1{color:var(--paper);letter-spacing:-.04em;text-wrap:balance;margin:0;font:600 clamp(32px,5vw,48px)/1.08 Manrope,sans-serif}.example-detail .example-labels{flex-wrap:wrap;gap:8px 12px;margin:14px 0 0;padding:0;list-style:none;display:flex}.example-detail__problem{color:#d8e7e9;max-width:650px;margin:18px 0 0;font:500 17px/1.6 DM Sans,sans-serif}.example-detail .comparison{margin:clamp(28px,4vw,40px) 0}.example-detail__body{max-width:var(--guide-article,710px);gap:28px;display:grid}.example-detail__body h2{color:var(--paper);letter-spacing:-.025em;margin:0 0 10px;font:600 22px/1.25 Manrope,sans-serif}.example-detail__body p{color:#c5d6db;margin:0;font:500 16px/1.6 DM Sans,sans-serif}.example-detail__method{color:#8faab2!important;font-size:14px!important}.example-related{border-top:1px solid #7de4ef24;margin-top:clamp(48px,6vw,72px);padding-top:clamp(28px,4vw,40px)}.example-related h2{color:var(--paper);letter-spacing:-.03em;margin:0 0 20px;font:600 clamp(22px,2.5vw,28px)/1.2 Manrope,sans-serif}.example-related ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,36px);margin:0;padding:0;list-style:none;display:grid}.example-related a{color:inherit;gap:12px;text-decoration:none;display:grid}.example-related img{aspect-ratio:4/3;object-fit:cover;background:var(--depth-900);border:1px solid #7de4ef29;border-radius:12px;width:100%;display:block}.example-related strong{color:#eef6f7;letter-spacing:-.02em;font:600 16px/1.25 Manrope,sans-serif;display:block}.example-related .gallery-summary{color:#a9c0c6;margin-top:6px;font:500 13px/1.45 DM Sans,sans-serif;display:block}@media (width<=1000px){.example-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.examples-page .page-intro{padding-bottom:22px}.examples-page .example-bento__row,.example-related ul{grid-template-columns:1fr}.examples-page .example-bento{gap:18px}.examples-page .example-caption{bottom:10px;left:12px;right:12px}}