.carousel-demo{gap:20px;display:grid}.carousel-demo-card{border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);min-width:0;overflow:hidden}.carousel-demo-card>header{border-bottom:1px solid var(--sprout-line);padding:14px 20px}.carousel-demo-card h3{font-size:13px;font-weight:550}.carousel-demo-card header p{color:var(--sprout-muted);margin-top:2px;font-size:12px;line-height:1.6}.carousel-demo-card-body{background:var(--sprout-canvas);gap:16px;min-width:0;padding:20px;display:grid}.carousel-demo-orientations{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;display:grid}.carousel-demo-stage{align-content:start;gap:8px;min-width:0;display:grid}.carousel-demo-caption{color:var(--sprout-muted);text-transform:capitalize;font-size:12px;font-weight:500}.carousel-demo-frame{box-sizing:border-box;width:100%;min-width:0;margin-inline:auto}.carousel-demo-frame[data-orientation=horizontal]{max-width:480px;padding-inline:48px}.carousel-demo-frame[data-orientation=vertical]{max-width:320px;padding-block:48px}.carousel-demo-vertical-viewport{flex-direction:column;height:160px;display:flex}.carousel-demo-slide{box-sizing:border-box;border:1px solid var(--sprout-line);background:var(--sprout-hover);height:160px;color:var(--sprout-text);user-select:none;border-radius:12px;place-items:center;font-size:18px;line-height:1.4;display:grid}.carousel-demo-stage .carousel-demo-position{border:1px solid var(--sprout-line);background:var(--sprout-surface);pointer-events:none;border-radius:999px;padding:1px 8px;position:absolute;top:8px;right:8px}.carousel-demo-position{color:var(--sprout-muted);font-variant-numeric:tabular-nums;font-size:12px;line-height:18px}.carousel-demo-composer{box-sizing:border-box;border:1px solid var(--sprout-line);border-radius:var(--sprout-radius-panel);background:var(--sprout-surface);gap:10px;width:100%;min-width:0;max-width:640px;margin-inline:auto;padding:10px;display:grid}.carousel-demo-attachments{--sprout-carousel-gap:8px;--sprout-carousel-basis:auto}.carousel-demo-attachments-track{padding-block:4px}.carousel-demo-edge{pointer-events:none;align-items:center;display:flex;position:absolute;inset-block:0}.carousel-demo-edge[data-side=start]{background:linear-gradient(to right, var(--sprout-surface), transparent);padding-right:32px;left:0}.carousel-demo-edge[data-side=end]{background:linear-gradient(to left, var(--sprout-surface), transparent);padding-left:32px;right:0}.carousel-demo-edge-arrow{border:1px solid var(--sprout-line);background:var(--sprout-surface);width:24px;height:24px;box-shadow:var(--sprout-shadow-control);color:var(--sprout-muted);cursor:pointer;opacity:0;pointer-events:auto;border-radius:8px;justify-content:center;align-items:center;padding:0;display:flex}.carousel-demo-attachments:hover .carousel-demo-edge-arrow,.carousel-demo-attachments:focus-within .carousel-demo-edge-arrow,.carousel-demo-edge-arrow:focus-visible{opacity:1}@media (pointer:coarse){.carousel-demo-edge-arrow{opacity:1}}.carousel-demo-edge-arrow:hover{background:var(--sprout-hover);color:var(--sprout-text)}.carousel-demo-edge-arrow:focus-visible{outline:2px solid var(--sprout-focus);outline-offset:1px}.carousel-demo-empty{border:1px dashed var(--sprout-line);border-radius:var(--sprout-radius-control);min-height:48px;color:var(--sprout-muted);text-align:center;place-items:center;font-size:12px;display:grid}.carousel-demo-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.carousel-demo-count{color:var(--sprout-muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.carousel-demo-guides{--sprout-carousel-basis:calc((100% - 16px) / 2)}@media (width<=479px){.carousel-demo-guides{--sprout-carousel-basis:100%}}.carousel-demo-guide{box-sizing:border-box;border:1px solid var(--sprout-line);background:var(--sprout-surface);user-select:none;border-radius:12px;height:100%;min-height:104px;padding:14px 16px}.carousel-demo-guide h4{font-size:13px;font-weight:550}.carousel-demo-guide p{color:var(--sprout-muted);overflow-wrap:anywhere;margin-top:4px;font-size:12px;line-height:1.6}.carousel-demo-dots{justify-content:center;gap:2px;display:flex}.carousel-demo-dot{cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;width:24px;height:24px;padding:0;display:grid}.carousel-demo-dot:before{content:"";background:var(--sprout-input);border-radius:999px;width:8px;height:8px}.carousel-demo-dot:hover:before{background:var(--sprout-border)}.carousel-demo-dot[aria-current=true]:before{background:var(--sprout-primary)}.carousel-demo-dot:focus-visible{outline:2px solid var(--sprout-focus);outline-offset:-2px}.carousel-demo-card-body>.carousel-demo-position{text-align:center}@media (prefers-reduced-motion:no-preference){.carousel-demo-edge-arrow,.carousel-demo-dot:before{transition:opacity var(--sprout-motion-fast) var(--sprout-motion-ease), background-color var(--sprout-motion-fast) var(--sprout-motion-ease), color var(--sprout-motion-fast) var(--sprout-motion-ease)}}