.examples-shell{max-width:1220px;margin:auto;padding:38px 20px 70px}.examples-hero{border-bottom:1px solid #cbd4cf;padding-bottom:27px}.examples-hero h1{margin:0;color:#1b343d;font:700 clamp(30px,4vw,46px)/1.2 "Microsoft YaHei","Noto Sans SC",sans-serif}.examples-hero>p:not(.eyebrow){max-width:820px;margin:15px 0 0;color:#40555c;font-size:16px}.source-meta{margin-top:17px;color:#627176;font:12px "Microsoft YaHei","Noto Sans SC",sans-serif}.examples-note{margin:24px 0;padding:15px 17px;border-left:4px solid var(--gold);background:#fff8e7;color:#51472d;font:14px/1.7 "Microsoft YaHei","Noto Sans SC",sans-serif}.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.example-card{background:#fffefa;border:1px solid var(--line);box-shadow:0 6px 18px rgba(24,42,49,.05)}.example-card figure{margin:0}.example-card img{display:block;width:100%;height:auto;background:#f7f9f8}.example-caption{padding:12px 15px;color:#40555c;font:13px/1.6 "Microsoft YaHei","Noto Sans SC",sans-serif}.example-caption strong{color:#285d50}.example-caption span{display:block;color:#748287;font-size:11px;margin-top:3px}@media(max-width:780px){.examples-shell{padding:27px 14px 52px}.example-grid{grid-template-columns:1fr}}
.examples-toolbar{display:flex;gap:8px;margin:22px 0 14px}.examples-toolbar button{border:1px solid var(--line);background:#fffefa;color:#385057;padding:8px 13px;cursor:pointer;font:12px "Microsoft YaHei","Noto Sans SC",sans-serif}.examples-toolbar button.active{background:var(--nav);border-color:var(--nav);color:#fff}.example-grid.large-view{grid-template-columns:1fr}.large-view .example-card img{max-height:none}.example-card img{cursor:zoom-in}.image-modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(10,22,27,.92);padding:30px}.image-modal[hidden]{display:none}.image-modal figure{max-width:94vw;max-height:94vh;margin:0;text-align:center}.image-modal img{display:block;max-width:94vw;max-height:87vh;width:auto;height:auto;margin:auto}.image-modal figcaption{color:#fff;margin-top:8px;font:13px "Microsoft YaHei","Noto Sans SC",sans-serif}.image-modal button{position:fixed;border:0;background:transparent;color:#fff;cursor:pointer;font-size:38px;line-height:1}.modal-close{top:15px;right:25px}.modal-prev{left:20px;top:50%;transform:translateY(-50%)}.modal-next{right:20px;top:50%;transform:translateY(-50%)}