.article-page .observers-control-wrap{display:flex;flex-wrap:wrap;gap:var(--cf-space-200);align-items:center}.article-page .observers-lab{align-items:stretch}.article-page .observers-scrollbox{max-block-size:calc(var(--cf-space-2000)*8);overflow:auto;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface-sunken);padding:var(--cf-space-300)}.article-page .observers-card-list{display:grid;grid-gap:var(--cf-space-300);gap:var(--cf-space-300)}.article-page .mutation-demo-card,.article-page .observer-card,.article-page .observer-sentinel,.article-page .resize-demo-box{border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface-raised);padding:var(--cf-space-400)}.article-page .observer-card{min-block-size:calc(var(--cf-space-2000)*3)}.article-page .observer-card.is-loaded{background:var(--cf-color-primary-subtle);border-color:var(--cf-color-primary-border)}.article-page .observer-sentinel{text-align:center;color:var(--cf-color-text-secondary);border-style:dashed}.article-page .observer-log{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);margin:var(--cf-space-400) 0 0;-webkit-padding-start:var(--cf-space-500);padding-inline-start:var(--cf-space-500);color:var(--cf-color-text-secondary);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275)}.article-page .mutation-host{min-block-size:calc(var(--cf-space-2000)*3)}.article-page .mutation-demo-card{display:flex;flex-wrap:wrap;gap:var(--cf-space-200);align-items:center}.article-page .mutation-demo-card[data-state=open]{border-color:var(--cf-color-success-border);background:var(--cf-color-success-subtle)}.article-page .observer-slider{display:inline-flex;align-items:center;gap:var(--cf-space-200);color:var(--cf-color-text-secondary)}.article-page .resize-demo-box{max-inline-size:100%}.article-page .resize-demo-box.is-narrow{background:var(--cf-color-warning-subtle);border-color:var(--cf-color-warning-border)}.article-page .resize-demo-box.is-wide{background:var(--cf-color-success-subtle);border-color:var(--cf-color-success-border)}@media(max-width:768px){.article-page .observer-slider{inline-size:100%;justify-content:space-between}}