.sf-experience{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.sf-experience>h2{margin-top:0}
.sf-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.sf-example-card{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel,#121820)}
.sf-example-card img{display:block;width:100%;max-height:260px;object-fit:contain;background:#0d131a}
.sf-example-card.pixel img{image-rendering:pixelated}
.sf-example-card.animation img{min-height:180px}
.sf-example-card.swatches img{min-height:110px}
.sf-example-card figcaption{padding:11px 13px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;line-height:1.55}
.sf-example-note{margin:16px 0 0;padding:13px 15px;border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--muted);line-height:1.65}
.sf-example-steps{display:grid;gap:9px;margin:18px 0;padding-left:24px}
.sf-example-steps li{padding-left:4px;line-height:1.65}
.sf-scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.sf-scenario-card{padding:15px;border:1px solid var(--line);border-radius:11px;background:var(--panel,#121820)}
.sf-scenario-card h3{margin:0 0 7px;font-size:1rem}
.sf-scenario-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.sf-example-sample{margin:14px 0}
.sf-example-sample code{display:inline-block;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#0d131a;color:var(--text)}
@media(max-width:760px){.sf-example-grid,.sf-scenario-grid{grid-template-columns:1fr}.sf-example-card.animation img{min-height:140px}}