/* Public worked examples reuse the course catalog's typography and tokens. */
.example{max-width:960px;padding-block:2rem 4rem}
.example h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.2;max-width:24ch}
.example h2{font-size:1.65rem;margin-top:0}
.example section{padding-block:2rem;border-top:1px solid var(--line);scroll-margin-top:1rem}
.example .lede{font-size:1.15rem;max-width:65ch}
.example .notice{padding:1rem;background:var(--tint);border-left:4px solid var(--teal-dark)}
.example pre{padding:1rem;background:var(--navy-deep);color:#fff;overflow:auto;border-radius:8px;line-height:1.6}
.example code{font-size:.92em;overflow-wrap:anywhere}
.example pre code{overflow-wrap:normal}
.example .table-wrap{overflow:auto}
.example table{border-collapse:collapse;width:100%;font-size:.95rem}
.example th,.example td{padding:.8rem;border:1px solid var(--line);text-align:left;vertical-align:top}
.example caption{text-align:left;font-weight:700;margin-bottom:.7rem}
.example th{background:var(--tint)}
.example details{padding:1rem;margin-block:.7rem;border:1px solid var(--line);border-radius:8px}
.example summary{font-weight:700;cursor:pointer;min-height:28px}
.example li{margin-block:.5rem}
.example .example-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;padding-block:1rem}
.example .example-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1.5rem}
.example :focus-visible{outline:3px solid #5143c6;outline-offset:3px}
@media(max-width:760px){.example section{padding-block:1.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}