.carousel-container{background-color:#fff;border-radius:8px;width:100%;height:500px;margin-bottom:2rem;position:relative;overflow:hidden}.carousel-main{width:100%;height:100%;position:relative}.carousel-slide{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.carousel-media{object-fit:contain;width:100%;height:100%}.carousel-arrow{cursor:pointer;color:#fff;z-index:2;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:background-color .3s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.carousel-arrow:hover{background:#000000b3}.carousel-arrow-left{left:16px}.carousel-arrow-right{right:16px}.carousel-indicators{z-index:2;gap:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.carousel-indicator{cursor:pointer;background:#ffffff80;border:none;border-radius:50%;width:12px;height:12px;transition:all .3s}.carousel-indicator.active{background:#fff;transform:scale(1.2)}.carousel-thumbnails{z-index:2;background:#0003;gap:8px;padding:12px;display:flex;position:absolute;bottom:0;left:0;right:0;overflow-x:auto}.carousel-thumbnail{cursor:pointer;border:2px solid #0000;border-radius:4px;min-width:60px;height:40px;transition:border-color .3s;overflow:hidden}.carousel-thumbnail.active{border:2px solid #fff}.carousel-thumbnail-media{object-fit:cover;width:100%;height:100%}.carousel-empty{text-align:center;color:#fff;padding:20px}@media (max-width:768px){.carousel-container{height:300px}.carousel-arrow{width:40px;height:40px}.carousel-arrow-left{left:8px}.carousel-arrow-right{right:8px}.carousel-thumbnails{padding:8px}.carousel-thumbnail{min-width:50px;height:32px}}.demo-section{background:#f8f9fa;border-radius:8px;margin-bottom:3rem;padding:1rem}.demo-title{color:#333;margin-bottom:.5rem;font-size:1.2rem;font-weight:700}.demo-description{color:#666;margin-bottom:1rem;font-size:.9rem}.controls{background:#f0f0f0;border-radius:8px;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;padding:1rem;display:flex}.control-group{align-items:center;gap:.5rem;display:flex}.control-group label{font-size:.9rem;font-weight:500}.control-group input,.control-group select{border:1px solid #ccc;border-radius:4px;padding:.25rem}
