.examples-hero{background:radial-gradient(at 78% 30%,#153238 0%,#101b1f 30%,#0d1214 70%);border-bottom:1px solid #263235;position:relative;overflow:hidden}.examples-hero-grid{pointer-events:none;background-image:linear-gradient(#b3ffff09 1px,#0000 1px),linear-gradient(90deg,#b3ffff09 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;mask-image:linear-gradient(90deg,#0000 10%,#000 75%)}.examples-hero-inner{max-width:var(--page-max);padding:92px var(--gutter) 78px;justify-content:space-between;align-items:end;gap:60px;margin:auto;display:flex;position:relative}.examples-kicker{font:500 11px var(--font-mono);letter-spacing:.13em;color:#a6f071;margin:0}.examples-kicker span{border-left:2px solid var(--lime);padding-left:13px}.examples-hero h1{font:700 clamp(42px, 5vw, 72px) / 1.04 var(--font-heading);letter-spacing:-.06em;color:var(--text-bright);margin:26px 0 0}.examples-lead{color:#a4b7b6;max-width:560px;margin:24px 0 0;font-size:16px;line-height:1.7}.examples-anatomy{backdrop-filter:blur(6px);border-radius:var(--radius-md);background:#111b1ecc;border:1px solid #2c3b3e;min-width:290px;margin:0;padding:18px 22px;list-style:none}.examples-anatomy li{color:#d7e5e2;align-items:center;gap:12px;padding:11px 0;font-size:13px;font-weight:600;display:flex}.examples-anatomy li+li{border-top:1px dashed #2a3a3c}.examples-anatomy svg{color:var(--cyan);flex-shrink:0}.examples-anatomy-number{font:10px var(--font-mono);color:#6f8585;width:18px}.examples-list{max-width:var(--page-max);padding:0 var(--gutter) 110px;margin:auto}.examples-grid{margin-top:56px}.example-index-card p{max-width:380px}.example-index-card h2{font:600 22px var(--font-heading);letter-spacing:-.04em;color:var(--text);margin:29px 0 7px}.example-card-tags,.example-page-tags{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.example-card-tags{margin-top:16px}.example-card-tags li,.example-page-tags li{font:10px var(--font-mono);letter-spacing:.06em;color:#8fb0ac;border-radius:var(--radius-sm);border:1px solid #2f4043;padding:3px 7px}.example-card-tags li:before,.example-page-tags li:before{content:"#";color:#5f8a61;margin-right:1px}.examples-closing{grid-column:span var(--span-3,1);background:linear-gradient(#b3ffff08 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#b3ffff08 1px,#0000 1px) 0 0/32px 32px,#10181a;border:1px dashed #3c5053;flex-direction:column;justify-content:center;gap:12px;padding:30px 34px;display:flex;position:relative}.examples-closing-kicker{font:10px var(--font-mono);letter-spacing:.14em;color:var(--lime);margin:0}.examples-closing h2{font:600 28px var(--font-heading);letter-spacing:-.04em;color:var(--text);margin:0}.examples-closing p:not(.examples-closing-kicker){color:#9fb2b1;max-width:520px;margin:0;font-size:14px;line-height:1.6}.examples-closing-actions{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.examples-list .pager{margin-top:56px}@media (width<=1180px){.examples-hero-inner{flex-direction:column;align-items:stretch;gap:40px}.examples-anatomy{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;display:grid}.examples-anatomy li+li{border-top:0}.examples-anatomy li:nth-child(n+3){border-top:1px dashed #2a3a3c}}@media (width<=980px){.examples-grid{grid-template-columns:repeat(2,1fr)}.examples-closing{grid-column:span var(--span-2,1)}}@media (width<=700px){.examples-hero-inner{padding:58px var(--gutter) 46px}.examples-hero h1{font-size:40px}.examples-lead{font-size:15px}.examples-anatomy{grid-template-columns:1fr;min-width:0}.examples-anatomy li:nth-child(n+2){border-top:1px dashed #2a3a3c}.examples-grid{grid-template-columns:1fr;margin-top:34px}.examples-closing{grid-column:auto;padding:26px 23px}.examples-list .pager{margin-top:40px}.example-index-card h2{margin-top:18px}.examples-list{padding-bottom:72px}}.article-topline .example-page-tags{justify-content:flex-end}.example-related h2{font:600 20px/1.2 var(--font-heading);letter-spacing:-.04em;color:var(--text);scroll-margin-top:calc(var(--header-h) + 33px);margin:8px 0 18px}.example-related-grid{gap:10px;display:grid}.example-related-card{border:1px solid var(--border-card);background:var(--surface);align-items:center;gap:16px;padding:15px 18px;transition:transform .25s,border-color .25s,background .25s;display:flex}.example-related-card:hover{background:#172327;border-color:#62aa9f;transform:translate(3px)}.example-related-icon{width:34px;height:34px;color:var(--cyan);border-radius:var(--radius);background:#172a2d;border:1px solid #36555a;flex-shrink:0;place-items:center;display:grid}.example-related-body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.example-related-body strong{font:600 15px/1.3 var(--font-heading);letter-spacing:-.03em;color:var(--text-bright)}.example-related-body small{color:#8ea5a3;font-size:12px;line-height:1.55}.example-related-arrow{color:#6f8585;flex-shrink:0;transition:color .2s,translate .2s}.example-related-card:hover .example-related-arrow{color:var(--lime);translate:2px -2px}.example-related+.pager{margin-top:40px}@media (width<=700px){.article-topline{flex-wrap:wrap;gap:12px}}@media (prefers-reduced-motion:reduce){.example-related-card,.example-related-card:hover{transform:none}}