.settings-list-demo-frame{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);overflow:hidden}.settings-list-demo-frame-bar{border-bottom:1px solid var(--sprout-line);color:var(--sprout-muted);padding:8px 16px;font-size:12px}.settings-list-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}.settings-list-demo-toolbar label,.settings-list-demo-toolbar-inline{color:var(--sprout-muted);flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:flex}.settings-list-demo-grid{gap:16px;margin-top:24px;display:grid}.settings-list-demo-canvas{background:var(--sprout-canvas);color:var(--sprout-text);font-family:var(--sprout-font);gap:16px;padding:16px;display:grid}@media (width>=40rem){.settings-list-demo-canvas{padding:20px 24px}}.settings-list-demo-note,.settings-list-demo-plain{padding:var(--sprout-settings-row-block) var(--sprout-settings-row-inline);color:var(--sprout-muted);font-size:var(--sprout-text-sm);margin:0;line-height:1.25rem}.settings-list-demo-note[data-tone=danger]{color:var(--sprout-danger)}.settings-list-demo-block{padding:var(--sprout-settings-row-block) var(--sprout-settings-row-inline);justify-items:start;gap:12px;display:grid}.settings-list-demo-actions{padding:0 var(--sprout-settings-row-inline) var(--sprout-settings-row-block);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.settings-list-demo-actions>p{overflow-wrap:anywhere;margin-right:auto}.settings-list-demo-muted,.settings-list-demo-danger,.settings-list-demo-body{margin:0;font-size:14px;line-height:20px}.settings-list-demo-muted{color:var(--sprout-muted)}.settings-list-demo-danger{color:var(--sprout-danger)}.settings-list-demo-stack{justify-items:start;gap:8px;display:grid}.settings-list-demo-stack>p{margin:0}.settings-list-demo-break{word-break:break-all}.settings-list-demo-words{overflow-wrap:anywhere;margin:0}.settings-list-demo-code{word-break:break-all;user-select:all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.settings-list-demo-picker{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.settings-list-demo-problem{color:var(--sprout-danger);flex-basis:100%;margin:0;font-size:14px}.settings-list-demo-grants{gap:16px;display:grid}.settings-list-demo-grants>h2{margin:0;font-size:14px;font-weight:500}.settings-list-demo-field{width:100%}@container sprout-settings (width>=36rem){.settings-list-demo-field{width:16rem}}.settings-list-demo-input{box-sizing:border-box;border:1px solid var(--sprout-input);border-radius:var(--sprout-radius-control);background:var(--sprout-surface);width:100%;height:32px;color:var(--sprout-text);font:inherit;transition:border-color var(--sprout-motion-fast) var(--sprout-motion-ease), box-shadow var(--sprout-motion-fast) var(--sprout-motion-ease);padding:0 10px;font-size:14px}.settings-list-demo-input:focus-visible{border-color:var(--sprout-border-strong);box-shadow:0 0 0 3px color-mix(in oklab, var(--sprout-focus) 30%, transparent);outline:none}.settings-list-demo-input[aria-invalid=true]{border-color:var(--sprout-danger)}.settings-list-demo-input:read-only{color:var(--sprout-muted)}.settings-list-demo-switch{background:var(--sprout-input);cursor:pointer;width:32px;height:18px;transition:background-color var(--sprout-motion-normal) var(--sprout-motion-ease);border:0;border-radius:999px;flex-shrink:0;align-items:center;padding:2px;display:inline-flex;position:relative}.settings-list-demo-switch[data-checked]{background:var(--sprout-primary)}.settings-list-demo-switch-thumb{background:var(--sprout-surface);width:14px;height:14px;box-shadow:var(--sprout-shadow-control);transition:translate var(--sprout-motion-normal) var(--sprout-motion-ease);border-radius:999px;display:block}.settings-list-demo-switch-thumb[data-checked]{background:var(--sprout-on-primary);translate:14px}.settings-list-demo-checkbox{border:1px solid var(--sprout-border);background:var(--sprout-surface);width:16px;height:16px;color:var(--sprout-on-primary);cursor:pointer;transition:background-color var(--sprout-motion-fast) var(--sprout-motion-ease), border-color var(--sprout-motion-fast) var(--sprout-motion-ease);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.settings-list-demo-checkbox[data-checked]{border-color:var(--sprout-primary);background:var(--sprout-primary)}.settings-list-demo-checkbox[data-disabled]{cursor:not-allowed;opacity:.5}.settings-list-demo-checkbox-indicator{display:inline-flex}.settings-list-demo-toggles{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-control);background:var(--sprout-surface);display:inline-flex}.settings-list-demo-toggle{height:28px;color:var(--sprout-muted);font:inherit;cursor:pointer;transition:background-color var(--sprout-motion-fast) var(--sprout-motion-ease), color var(--sprout-motion-fast) var(--sprout-motion-ease);background:0 0;border:0;align-items:center;gap:6px;padding:0 10px;font-size:12px;display:inline-flex}.settings-list-demo-toggle+.settings-list-demo-toggle{border-left:1px solid var(--sprout-line)}.settings-list-demo-toggle:first-child{border-radius:calc(var(--sprout-radius-control) - 1px) 0 0 calc(var(--sprout-radius-control) - 1px)}.settings-list-demo-toggle:last-child{border-radius:0 calc(var(--sprout-radius-control) - 1px) calc(var(--sprout-radius-control) - 1px) 0}.settings-list-demo-toggle:hover{background:var(--sprout-hover);color:var(--sprout-text)}.settings-list-demo-toggle[data-pressed]{background:var(--sprout-active);color:var(--sprout-text)}.settings-list-demo-switch:focus-visible,.settings-list-demo-checkbox:focus-visible,.settings-list-demo-toggle:focus-visible{outline:2px solid var(--sprout-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){.settings-list-demo-input,.settings-list-demo-switch,.settings-list-demo-switch-thumb,.settings-list-demo-checkbox,.settings-list-demo-toggle{transition:none}}