.state-demo-playground,.state-demo-frame{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);overflow:hidden}.state-demo-toolbar{border-bottom:1px solid var(--sprout-line);color:var(--sprout-muted);flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 16px;font-size:12px;display:flex}.state-demo-toolbar label{align-items:center;gap:8px;display:flex}.state-demo-segments{flex-wrap:wrap;gap:6px;display:inline-flex}.state-demo-toggle{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-control);background:var(--sprout-surface);height:30px;color:var(--sprout-text);cursor:pointer;transition:background-color var(--sprout-motion-fast) var(--sprout-motion-ease), border-color var(--sprout-motion-fast) var(--sprout-motion-ease);align-items:center;padding:0 12px;font-size:12px;display:inline-flex}.state-demo-toggle:hover:not(:disabled){background:var(--sprout-hover)}.state-demo-toggle[aria-pressed=true]{border-color:var(--sprout-border-strong);background:var(--sprout-hover)}.state-demo-toggle:focus-visible,.state-demo-flow:focus-visible{outline:2px solid var(--sprout-focus);outline-offset:2px}.state-demo-toggle:disabled{cursor:not-allowed;opacity:.5}.state-demo-stage{background:var(--sprout-canvas);align-items:center;min-height:320px;padding:16px;display:grid}.state-demo-stage[data-sample]{padding:24px}.state-demo-flow:focus{outline:none}.state-demo-resize{width:100%;transition:max-width var(--sprout-motion-normal) var(--sprout-motion-ease);margin-inline:auto}.state-demo-foot{border-top:1px solid var(--sprout-line);min-height:41px;color:var(--sprout-muted);padding:12px 16px;font-size:12px}.state-demo-stack{gap:16px;margin-top:24px;display:grid}.state-demo-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-top:24px;display:grid}.state-demo-stack>.state-demo-grid{margin-top:0}.state-demo-frame{flex-direction:column;display:flex}.state-demo-frame-bar{border-bottom:1px solid var(--sprout-line);text-transform:capitalize;padding:10px 16px;font-size:12px;font-weight:550}.state-demo-frame-body{background:var(--sprout-canvas);flex:1;align-content:center;gap:12px;padding:0 12px;display:grid}.state-demo-frame-body>.state-demo-segments{padding-top:12px}.state-demo-frame-body>[data-layout=sample]{margin-bottom:12px}.state-demo-foot-inline{justify-content:center;padding-bottom:16px;display:flex}.state-demo-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.state-demo-spin{animation:1s linear infinite state-demo-spin}@keyframes state-demo-spin{to{transform:rotate(360deg)}}.state-demo-sample{color:var(--sprout-text);font-size:12px}.state-demo-sample-bar{border-bottom:1px solid var(--sprout-line);color:var(--sprout-muted);align-items:center;gap:6px;padding:10px 16px;display:flex}.state-demo-sample ul{margin:0;padding:4px 0;list-style:none}.state-demo-sample li{align-items:center;gap:12px;padding:10px 16px;display:flex}.state-demo-sample-tile{border:1px solid var(--sprout-line);background:var(--sprout-canvas);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.state-demo-sample-copy{flex:1;min-width:0;display:grid}.state-demo-sample-copy strong{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.state-demo-sample-copy span,.state-demo-sample-trailing{color:var(--sprout-muted)}@media (prefers-reduced-motion:reduce){.state-demo-spin{animation:none}.state-demo-resize,.state-demo-toggle{transition:none}}.state-panel-samples-demo-playground,.state-panel-samples-demo-card{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);min-width:0;margin:0;overflow:hidden}.state-panel-samples-demo-toolbar{border-bottom:1px solid var(--sprout-line);color:var(--sprout-muted);flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 16px;font-size:12px;display:flex}.state-panel-samples-demo-toolbar label{align-items:center;gap:8px;display:flex}.state-panel-samples-demo-stage{background:var(--sprout-canvas);align-items:center;min-height:360px;padding:24px;display:grid}.state-panel-samples-demo-stage[data-frame=window]{justify-items:center}.state-panel-samples-demo-stage>*{min-width:0;animation:state-panel-samples-demo-in var(--sprout-motion-normal) var(--sprout-motion-ease) both}.state-panel-samples-demo-stage[data-frame=window]>.state-panel-samples-demo-window{width:100%;max-width:36rem}.state-panel-samples-demo-none{text-align:center;max-width:24rem;color:var(--sprout-muted);margin:0;font-size:13px}.state-panel-samples-demo-foot{border-top:1px solid var(--sprout-line);color:var(--sprout-muted);overflow-wrap:anywhere;margin:0;padding:12px 16px;font-size:12px;line-height:1.5}.state-panel-samples-demo-foot code{color:var(--sprout-text)}.state-panel-samples-demo-gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;margin-top:24px;display:grid}.state-panel-samples-demo-card{flex-direction:column;display:flex}.state-panel-samples-demo-card>figcaption{border-bottom:1px solid var(--sprout-line);gap:2px;padding:10px 16px;font-size:12px;line-height:1.5;display:grid}.state-panel-samples-demo-card>figcaption strong{color:var(--sprout-text);font-weight:550}.state-panel-samples-demo-card>figcaption span{color:var(--sprout-muted);overflow-wrap:anywhere}.state-panel-samples-demo-card>.state-panel-samples-demo-window{flex:1;margin:16px}.state-panel-samples-demo-window{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);min-width:0;box-shadow:var(--sprout-shadow-panel);overflow:hidden}.state-panel-samples-demo-narrow{max-width:300px}@keyframes state-panel-samples-demo-in{0%{opacity:0;transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.state-panel-samples-demo-stage>*{animation:none}}