/* Stable columns: details grow locally, and the frame follows real content. */
.work-examples { padding: 12px; gap: 12px; overflow-anchor: none; }
.example-controls { margin-bottom: 16px; }
.is-animated-board.work-examples { height: auto; min-height: 0; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 12px; }
.is-animated-board .example-column { display: flex; flex-direction: column; gap: 10px; }
.is-animated-board .work-example, .is-animated-board .work-example[data-size] { flex: 0 0 auto; min-height: 0; overflow: visible; transition: border-color .3s, background .3s; }
.is-animated-board .work-example summary { padding: 14px 16px; }
.is-animated-board .work-example summary .tag { margin-bottom: 7px; }
.is-animated-board .work-example h3 { font-size: 19px; line-height: 1.2; margin-bottom: 9px; }
.is-animated-board .work-example[data-size="expanded"] h3 { font-size: 21px; }
.is-animated-board .work-example[data-size="small"] h3 { font-size: 17px; margin-bottom: 0; }
.is-animated-board .work-example[data-size="small"] .example-summary { display: none; }
.is-animated-board .work-example[data-size="medium"] .example-summary { display: block; }
.is-animated-board .example-summary { font-size: 14px; line-height: 1.5; }
.is-animated-board .example-detail { margin: 0 16px; padding: 13px 0; font-size: 15px; line-height: 1.5; animation: none; }
.is-animated-board .example-evidence { margin-top: 10px; font-size: 11px; line-height: 1.45; }
.is-animated-board .example-toggle { top: 14px; right: 14px; }
@supports (interpolate-size: allow-keywords) {
  .is-animated-board .work-example { interpolate-size: allow-keywords; }
  .is-animated-board .work-example::details-content { block-size: 0; overflow: clip; transition: block-size .5s ease, content-visibility .5s allow-discrete; }
  .is-animated-board .work-example[open]::details-content { block-size: auto; }
}
@media (min-width: 901px) and (max-width: 1150px) {
 .is-animated-board .work-example summary { padding: 12px 14px; }
 .is-animated-board .example-detail { font-size: 14px; margin-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .work-example::details-content { transition: none !important; } }

.example-tools { display: none; }
.is-animated-board .work-example[data-size="medium"] .example-tools { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }