/* Scoped minimal styles extracted from worked_example.tt */
.ts-worked-example { margin-top:1rem; margin-bottom:1rem; border-left:4px solid #2563eb; background:#fff; padding:0.75rem; border-radius:6px; box-shadow:0 6px 18px rgba(15,23,42,0.04); }
.ts-worked-example__header { margin-bottom:0.5rem }
.ts-worked-example__title { font-size:1.05rem; margin:0 0 0.25rem }
.ts-worked-example__summary { margin:0 0 0.25rem }
.ts-worked-example__checklist { color:#6b7280; font-size:0.9rem; margin:0 }
.ts-worked-example__body { display:grid; grid-template-columns: minmax(0,2fr) minmax(0,1.3fr); grid-gap:1rem; align-items:stretch }
.ts-worked-example__step-list { list-style:none; margin:0; padding:0; display:grid; grid-row-gap:0.6rem }
.ts-worked-example__step { border-radius:0.5rem; padding:0.6rem 0.8rem; background:linear-gradient(135deg,#eff6ff,#ecfdf5); border:1px solid #e5e7eb; opacity:0; transform:translateY(4px); transition: opacity 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out }
.ts-worked-example__step-title { font-size:0.95rem; margin:0 0 0.25rem }
.ts-worked-example__step-points { margin:0; padding-left:1rem; font-size:0.9rem }
.ts-worked-example__step--dim { opacity:0.15; transform:translateY(2px); box-shadow:none }
.ts-worked-example__step--visible { opacity:1; transform:translateY(0); box-shadow:0 8px 20px rgba(15,23,42,0.06) }
.ts-worked-example__chart { display:flex; flex-direction:column; justify-content:space-between }
.ts-worked-example__sparkline { width:100%; max-width:260px }
.ts-worked-example__chart-caption { font-size:0.8rem; color:#6b7280; margin-top:0.5rem }
.ts-worked-example__actions { margin-top:0.75rem; display:flex; justify-content:space-between; align-items:center }
.ts-worked-example__controls { display:flex; align-items:center; gap:0.5rem }
.ts-worked-example__throbber { width:10px; height:10px; border-radius:999px; background:#e5e7eb; position:relative; overflow:hidden }
.ts-worked-example__throbber-dot { position:absolute; width:100%; height:100%; border-radius:999px; background:#2563eb; transform:scale(0); opacity:0; animation: ts-throbber-pulse 1s ease-out infinite; transform-origin:center }
.ts-worked-example__throbber--hidden { opacity:0; transition:opacity 150ms ease-out }
@keyframes ts-throbber-pulse { 0% { transform:scale(0.1); opacity:0.2 } 40% { transform:scale(1); opacity:0.9 } 100% { transform:scale(1.4); opacity:0 } }
@media (max-width:767.98px) { .ts-worked-example__body { grid-template-columns:1fr } }
