.button-demo{gap:20px;display:grid}.button-demo-playground,.button-demo-card{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);overflow:hidden}.button-demo-toolbar{border-bottom:1px solid var(--sprout-line);color:var(--sprout-muted);flex-wrap:wrap;gap:12px 20px;padding:14px 20px;font-size:12px;display:flex}.button-demo-toolbar label{align-items:center;gap:8px;display:flex}.button-demo-stage{background:var(--sprout-canvas);align-content:center;justify-items:center;gap:10px;min-height:180px;padding:32px 20px;display:grid}.button-demo-card>header{padding:14px 20px 0}.button-demo-card h2{font-size:14px;font-weight:550}.button-demo-card header p{color:var(--sprout-muted);margin-top:2px;font-size:12px}.button-demo-body{gap:14px;padding:16px 20px 20px;display:grid}.button-demo-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.button-demo-stack{align-content:start;justify-items:start;gap:8px;display:grid}.button-demo-split,.button-demo-patterns{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.button-demo-sizes{gap:28px;width:100%;min-width:0;display:grid}.button-demo-sizes h3{color:var(--sprout-muted);margin:0 0 10px;font-size:12px;font-weight:500}.button-demo-scale-row{background:var(--sprout-line);border:1px solid var(--sprout-line);border-radius:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;display:grid;overflow:hidden}.button-demo-scale-row figure{background:var(--sprout-surface);grid-template-rows:1fr auto;min-width:0;margin:0;display:grid}.button-demo-scale-stage{place-items:center;min-height:88px;padding:16px;display:grid}.button-demo-scale-row figcaption,.button-demo-pattern code{color:var(--sprout-text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}.button-demo-scale-row figcaption{border-top:1px solid var(--sprout-line);color:var(--sprout-muted);text-align:center;padding:8px 12px}.button-demo-pattern-sizes dl{border:1px solid var(--sprout-line);border-radius:10px;margin:0}.button-demo-pattern{grid-template-columns:minmax(180px,240px) minmax(0,1fr);align-items:center;display:grid}.button-demo-pattern+.button-demo-pattern{border-top:1px solid var(--sprout-line)}.button-demo-pattern dt{gap:3px;padding:14px 16px;display:grid}.button-demo-pattern dt span{color:var(--sprout-muted);font-size:12px}.button-demo-pattern dd{align-items:center;min-width:0;max-width:360px;min-height:72px;margin:0;padding:12px 16px;display:flex}.button-demo-pattern dd:has([data-size=column-header-end]){justify-content:flex-end}@media (width<=640px){.button-demo-pattern{grid-template-columns:minmax(0,1fr)}.button-demo-pattern dt{padding-bottom:0}.button-demo-pattern dd{max-width:none;min-height:0;padding-top:10px;padding-bottom:14px}}.button-demo-bud{background:var(--sprout-surface);width:32px;height:32px;color:var(--sprout-text);box-shadow:inset 0 0 0 1px var(--sprout-line);border-radius:999px;place-items:center;display:inline-grid}.button-demo-meta{color:var(--sprout-muted);font-size:var(--sprout-text-xs);font-weight:400}.button-demo-panel{border:1px solid var(--sprout-line);background:var(--sprout-canvas);border-radius:10px;align-content:start;gap:10px;min-width:0;padding:14px;display:grid}.button-demo-panel h3{color:var(--sprout-muted);font-size:12px;font-weight:550}.button-demo-note{color:var(--sprout-muted);font-size:12px}.button-demo-error{color:var(--sprout-danger);font-size:12px}.button-demo-empty{border:1px dashed var(--sprout-border);width:100%;color:var(--sprout-muted);border-radius:8px;padding:14px;font-size:12px}.button-demo-alert{border:1px solid color-mix(in oklab, var(--sprout-danger) 40%, transparent);color:var(--sprout-danger);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;font-size:12px;display:flex}.button-demo-files{gap:2px;width:100%;display:grid}.button-demo-files li{align-items:center;gap:8px;font-size:13px;display:flex}.button-demo-files li>span{flex:1}.button-demo-segment{border:1px solid var(--sprout-line);border-radius:8px;gap:2px;padding:2px;display:flex}.button-demo-truncate{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.button-demo-faint{color:var(--sprout-muted)}.button-demo-narrow{max-width:280px}.button-demo-spinner{animation:.8s linear infinite button-demo-spin}@keyframes button-demo-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.button-demo-spinner{animation:none}}.button-demo-chevron{transition:transform var(--sprout-motion-fast,.12s) ease}[data-panel-open]>.button-demo-chevron{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){.button-demo-chevron{transition:none}}.button-demo-table{border-collapse:collapse;width:100%;font-size:13px}.button-demo-table th,.button-demo-table td{border-bottom:1px solid var(--sprout-line);text-align:left;padding:6px 8px}.button-demo-table .button-demo-end{text-align:right}.button-demo-tree,.button-demo-subtree{gap:1px;width:100%;display:grid}.button-demo-subtree{padding-left:16px}.button-demo-dock{border:1px dashed var(--sprout-border);border-radius:8px;width:100%;height:150px;position:relative}.button-demo-dock .button-demo-note{text-align:center;pointer-events:none;position:absolute;inset:50% 0 auto;translate:0 -50%}.button-demo-dock-anchor{position:absolute}.button-demo-dock-anchor[data-corner=top-left]{top:8px;left:8px}.button-demo-dock-anchor[data-corner=top-right]{top:8px;right:8px}.button-demo-dock-anchor[data-corner=bottom-right]{bottom:8px;right:8px}.button-demo-dock-anchor[data-corner=bottom-left]{bottom:8px;left:8px}.button-demo-avatar{background:var(--sprout-primary);width:32px;height:32px;color:var(--sprout-on-primary);border-radius:999px;place-items:center;display:grid}.button-demo-field{color:var(--sprout-muted);align-items:center;gap:8px;font-size:12px;display:flex}.button-demo-field input{border:1px solid var(--sprout-border);background:var(--sprout-surface);height:28px;color:var(--sprout-text);border-radius:6px;padding:0 8px;font-size:13px}.button-demo-positioner{z-index:50}.button-demo-popup,.button-demo-dialog,.button-demo-tooltip{border:1px solid var(--sprout-line);background:var(--sprout-surface);color:var(--sprout-text);box-shadow:var(--sprout-shadow-panel);transition:opacity var(--sprout-motion-fast,.12s) ease, scale var(--sprout-motion-fast,.12s) ease}.button-demo-popup[data-starting-style],.button-demo-popup[data-ending-style],.button-demo-dialog[data-starting-style],.button-demo-dialog[data-ending-style],.button-demo-tooltip[data-starting-style],.button-demo-tooltip[data-ending-style]{opacity:0;scale:.97}@media (prefers-reduced-motion:reduce){.button-demo-popup,.button-demo-dialog,.button-demo-tooltip{transition:none}}.button-demo-popup{border-radius:8px;min-width:140px;padding:4px;font-size:13px}.button-demo-popover{max-width:240px;color:var(--sprout-muted);justify-items:start;gap:8px;padding:12px;display:grid}.button-demo-popup-title{color:var(--sprout-text);font-size:14px;font-weight:550}.button-demo-menu-item{cursor:default;border-radius:5px;outline:none;padding:6px 8px}.button-demo-menu-item[data-highlighted]{background:var(--sprout-hover)}.button-demo-tooltip{border-radius:6px;padding:4px 8px;font-size:12px}.button-demo-backdrop{z-index:50;background:#00000059;position:fixed;inset:0}.button-demo-dialog{z-index:51;width:min(360px,100vw - 32px);color:var(--sprout-muted);border-radius:12px;gap:10px;padding:20px;font-size:13px;display:grid;position:fixed;top:50%;left:50%;translate:-50% -50%}.button-demo-actions{justify-content:flex-end;margin-top:6px}@media (width<=767px){.button-demo-split,.button-demo-patterns{grid-template-columns:minmax(0,1fr)}.button-demo-toolbar,.button-demo-body{padding-inline:14px}}@media (width<=639px){[data-size=back] .button-demo-back-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}