.widget-demo { width: min(320px, 100%); min-width: 0; margin: 0 auto; }
.widget-demo-media { display: block; overflow: hidden; border-radius: 28px; box-shadow: 0 16px 40px #40523b18; cursor: zoom-in; }
.widget-demo img { display: block; width: 100%; height: auto; }
.widget-demo figcaption { display: grid; justify-items: center; gap: 13px; margin-top: 20px; color: #65715d; text-align: center; font-size: 12px; line-height: 1.8; }
.widget-demo-steps { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.widget-demo-steps b { color: #9aa68e; font-weight: 400; }
.widget-demo-toggle { min-height: 38px; padding: 7px 17px; border: 1px solid #b7c7b2; border-radius: 24px; background: #fffdf7; color: #42664e; font: inherit; cursor: pointer; }
.widget-demo-toggle:hover { background: #e8efdf; }
.widget-demo-toggle[hidden] { display: none; }
.widget-demo-stills { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; font-size: 11px; }
.widget-demo-stills a { text-decoration: underline; text-underline-offset: 4px; }
.widget-demo a:focus-visible, .widget-demo-toggle:focus-visible { outline: 3px solid #42664e; outline-offset: 4px; }
.story-widgets .widget-demo { margin-top: 24px; }
@media (max-width: 600px) { .widget-demo { width: min(280px, 100%); }.widget-demo-media { border-radius: 24px; }.widget-demo figcaption { font-size: 11px; } }