/* Static worked examples use the shared brand tokens. */
.example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--et-space-5); margin: var(--et-space-6) 0; }
.example-card { min-width: 0; margin: 0 0 var(--et-space-5); padding: var(--et-space-5); background: var(--et-panel); border: 1px solid var(--et-line-strong); border-radius: var(--et-radius-lg); color: var(--et-mist); line-height: 1.7; }
.example-grid > .example-card { margin: 0; }
.example-card figcaption { margin-bottom: var(--et-space-5); color: var(--et-slate); font: var(--et-fs-sm)/1.6 var(--et-font-mono); }
.example-card h3 { color: var(--et-white); margin: 0 0 var(--et-space-4); }
.example-card p { margin: var(--et-space-4) 0 0; }
.example-card blockquote { margin: 0; padding: 0 0 0 var(--et-space-4); border-left: 2px solid var(--et-lime); color: var(--et-white); }
.example-card dl { margin: 0; }
.example-card dt { margin-top: var(--et-space-4); color: var(--et-slate); font-size: var(--et-fs-sm); }
.example-card dt:first-child { margin-top: 0; }
.example-card dd { margin: var(--et-space-1) 0 0; }
.example-card ol { margin: 0; padding-left: var(--et-space-5); }
.example-card li + li { margin-top: var(--et-space-3); }
.example-card a { color: var(--et-mist); text-decoration: underline; text-underline-offset: .2em; }
.example-card a:focus-visible { outline: 2px solid var(--et-lime); outline-offset: 4px; }
@media (max-width: 600px) { .example-grid { grid-template-columns: 1fr; } .example-card { padding: var(--et-space-4); } }