.examples-page main{padding-top:28px}.examples-intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"heading image" "context image";gap:16px 42px;align-content:start;padding:10px 0 32px}.examples-intro-heading{grid-area:heading;align-self:end}.examples-intro h1{font-size:clamp(2.7rem,4.6vw,4.1rem);line-height:1.03;margin-bottom:20px}.examples-intro h1 em{font-weight:400}.examples-intro .eyebrow{font-size:10px;margin-bottom:20px}.examples-intro .hero-intro{max-width:420px;font-size:21px;margin-bottom:0}.examples-intro-context{grid-area:context;align-self:start}.examples-intro-context>p{font-size:15px;max-width:440px}.examples-intro-context .small{font-size:12px;color:var(--muted);margin-bottom:0}.examples-featured{grid-area:image;margin:0;min-width:0}.examples-featured>a{display:block}.examples-featured img{display:block;width:100%;height:auto;object-fit:contain;border:1px solid #c6cec2}.examples-featured figcaption{padding-top:12px;font-size:13px;line-height:1.5}.examples-featured figcaption>a{font-size:15px;font-weight:600}.examples-featured figcaption>p{margin:6px 0 0}.examples-featured .example-credit{font-size:11px;color:var(--muted)}.examples-jump{display:flex;flex-wrap:wrap;gap:12px 25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;font-size:13px}.examples-section{padding:65px 0 15px;scroll-margin-top:25px}.examples-section-heading{max-width:700px;margin-bottom:32px}.examples-section-heading h2{font-size:clamp(30px,4vw,43px)}.examples-section-heading .eyebrow{margin-bottom:12px}.examples-section-heading>p:last-child{color:var(--muted);font-size:16px}.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 30px;align-items:start}.example{min-width:0;scroll-margin-top:30px}.example figure{margin:0}.example-image{display:flex;align-items:center;justify-content:center;background:#e7e9df;min-height:190px;text-decoration:none;overflow:hidden;border:1px solid #c6cec2}.example-image img{display:block;width:auto;max-width:100%;height:auto;max-height:510px;object-fit:contain}.example-image:hover{outline:2px solid var(--blue);outline-offset:3px}.example figcaption{padding:20px 1px 6px}.example h3{font-size:25px;line-height:1.15;margin-bottom:12px}.example figcaption>p{font-size:14px;line-height:1.65;margin-bottom:12px}.example .example-credit{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:8px}.example .example-source{font-size:11px;margin-bottom:0;color:var(--muted)}.framework-example .example-image{background:white}.framework-example .example-image img{max-height:none;width:100%}.framework-text{margin:15px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.framework-text summary{cursor:pointer;font-size:14px;font-weight:600}.table-scroll{overflow-x:auto}.framework-text table{border-collapse:collapse;width:100%;font-size:13px;margin:22px 0 0;min-width:700px}.framework-text caption{text-align:left;font-size:13px;padding:0 0 15px}.framework-text th,.framework-text td{text-align:left;vertical-align:top;border:1px solid var(--line);padding:13px;line-height:1.5}.framework-text thead{background:#e5eaf2}.examples-contribute{background:#e1eadf;border:1px solid #bfd0bb;padding:42px;margin:60px 0 30px;max-width:900px}.examples-contribute h2{font-size:42px;line-height:1.1}.examples-contribute>p{max-width:700px}.examples-contribute strong{overflow-wrap:anywhere}.examples-credit-note{font-size:12px;color:var(--muted);max-width:840px;padding:0 0 35px}.examples-page .examples-section:target>.examples-section-heading h2,.examples-page .example:target h3{text-decoration:underline;text-decoration-color:#d4a52b;text-underline-offset:6px}@media(max-width:760px){.examples-intro{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "image" "context";gap:24px;padding-top:0}.examples-intro h1{font-size:42px;margin-bottom:15px}.examples-intro .eyebrow{margin-bottom:15px}.examples-intro .hero-intro{font-size:18px;max-width:none}.examples-intro-context>p{max-width:none}.examples-featured figcaption{font-size:12px}.examples-jump{gap:13px 20px}.examples-grid{grid-template-columns:1fr;gap:28px}.examples-section{padding-top:45px}.example-image img{max-height:600px}.example-image{min-height:0}.example h3{font-size:24px}.examples-contribute{padding:26px}.examples-contribute h2{font-size:34px}}@media print{.examples-jump,.examples-contribute,.examples-featured{display:none}.examples-intro{display:block;padding:0 0 20px}.examples-intro h1{font-size:32px}.examples-grid{grid-template-columns:1fr 1fr;gap:20px}.example{break-inside:avoid}.example-image img{max-height:220px}.example h3{font-size:18px}.example figcaption>p{font-size:10px}.example .example-credit,.example .example-source{font-size:9px}.examples-section{padding-top:25px}.examples-section-heading h2{font-size:23px}.framework-text{display:none}}