.sidebar-demo{max-width:1180px;margin-inline:auto}.sidebar-demo-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:0 0 16px;font-size:12px;display:flex}.sidebar-demo-tabs{border:1px solid var(--sprout-line);background:var(--sprout-canvas);border-radius:9px;gap:3px;padding:3px;display:flex}.sidebar-demo-tabs button{cursor:pointer;color:var(--sprout-muted);border-radius:6px;padding:7px 14px}.sidebar-demo-tabs button[aria-pressed=true]{background:var(--sprout-surface);color:var(--sprout-text);box-shadow:var(--sprout-shadow-control)}.sidebar-demo-options{color:var(--sprout-muted);flex-wrap:wrap;gap:16px;display:flex}.sidebar-demo-options label{align-items:center;gap:8px;display:flex}.sidebar-demo-frame{border:1px solid var(--sprout-line);background:var(--sprout-surface);height:620px;box-shadow:var(--sprout-shadow-panel);border-radius:14px;overflow:hidden}.sidebar-demo-monogram{border:1px solid var(--sprout-line);background:var(--sprout-surface);border-radius:7px;flex-shrink:0;place-items:center;width:28px;height:28px;font-size:14px;font-weight:600;display:grid}.sidebar-demo-search{border:1px solid var(--sprout-border);min-height:34px;color:var(--sprout-muted);background:var(--sprout-surface);border-radius:6px;align-items:center;gap:8px;margin:0 2px 16px;padding:0 8px;display:flex}.sidebar-demo-search input{width:100%;min-width:0;color:var(--sprout-text);padding:7px 0;font-size:12px}.sidebar-demo-search input::placeholder{color:var(--sprout-muted)}.sidebar-demo-search:focus-within{outline:2px solid var(--sprout-focus);outline-offset:2px}.sidebar-demo-search input:focus{outline:none}.sprout-sidebar-panel[data-state=collapsed] .sidebar-demo-search{display:none}.sidebar-demo-message{color:var(--sprout-muted);padding:8px;font-size:12px;line-height:1.7}.sidebar-demo-retry{border:1px solid var(--sprout-border);background:var(--sprout-surface);cursor:pointer;border-radius:6px;margin:0 8px 8px;padding:5px 8px;font-size:12px}.sidebar-demo-main{flex-direction:column;flex:1;min-width:0;display:flex}.sidebar-demo-page-header{border-bottom:1px solid var(--sprout-line);flex-shrink:0;align-items:center;gap:12px;height:64px;padding:12px 20px;display:flex}.sidebar-demo-breadcrumb{min-width:0;color:var(--sprout-muted);align-items:center;gap:8px;font-size:12px;display:flex}.sidebar-demo-breadcrumb>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sidebar-demo-preview-label{color:var(--sprout-muted);flex-shrink:0;margin-left:auto;font-size:11px}.sidebar-demo-page-content{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:32px 24px;display:flex;overflow:auto}.sidebar-demo-page-symbol{border:1px solid var(--sprout-line);width:64px;height:64px;color:var(--sprout-muted);background:var(--sprout-canvas);border-radius:16px;place-items:center;margin-bottom:24px;display:grid}.sidebar-demo-selected{color:var(--sprout-muted);font-size:11px}.sidebar-demo-page-content h2{overflow-wrap:anywhere;letter-spacing:-.8px;max-width:100%;margin-top:10px;font-size:clamp(24px,3vw,32px);font-weight:550;line-height:1.2}.sidebar-demo-page-content h2+p{color:var(--sprout-muted);margin-top:16px;font-size:13px;line-height:1.8}.sidebar-demo-usage-link{text-underline-offset:4px;align-items:center;gap:8px;margin-top:24px;font-size:12px;text-decoration:underline;display:flex}.sidebar-demo-page-footer{border-top:1px solid var(--sprout-line);color:var(--sprout-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-size:11px;display:flex}.sidebar-demo-shortcut{align-items:center;gap:8px;display:inline-flex}.sidebar-demo-shortcut kbd{border:1px solid var(--sprout-line);border-radius:4px;padding:2px 4px;font-size:10px}.sidebar-demo-caption{color:var(--sprout-muted);flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:16px;font-size:11px;display:flex}.sidebar-demo-caption a{text-underline-offset:4px;text-decoration:underline}.sidebar-demo-storage-error{color:var(--sprout-danger);margin-top:12px;font-size:12px}@media (width<=767px){.sidebar-demo-toolbar{gap:12px}.sidebar-demo-options{gap:8px;font-size:11px}.sidebar-demo-options label{gap:4px}.sidebar-demo-options select{max-width:88px;padding-inline:4px}.sidebar-demo-frame{height:540px}.sidebar-demo-page-header{gap:8px;padding-inline:12px}.sidebar-demo-preview-label,.sidebar-demo-shortcut{display:none}.sidebar-demo-page-content{padding-inline:16px}.sidebar-demo-frame:has(.sprout-sidebar-panel:not(.sprout-sidebar-mobile)){overflow-x:auto}.sidebar-demo-frame:has(.sprout-sidebar-panel:not(.sprout-sidebar-mobile)) .sidebar-demo-main{min-width:220px}}