.carousel-viewport {
      position: relative;
      overflow: hidden;
      cursor: grab;
    }

    .carousel-viewport:active {
      cursor: grabbing;
    }

    .carousel-track {
      display: flex;
      user-select: none;
    }

    .carousel-slide {
      min-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-top: 1.5rem;
    }
	
	 .carousel-btn {
		width:3vw;
		height:3vw;
		font-size:3vw;
      color:var(--green);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
	  margin:0 0.5vw;
    }

    .carousel-btn:is(:hover, :focus) { color:var(--o); }

    .carousel-indicators {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top:1vw;
	  padding-right:0.3vw;
    }

    .indicator {
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 50%;
      background: #9ca3af;
      cursor: pointer;
      transition: all 0.3s;
      padding: 0;
    }

    .indicator:is(:hover, :focus) {
      background: #6b7280;
    }

    .indicator.active {
      background: var(--green);
      width: 28px;
	  border-radius:99rem;
    }

    .instructions {
      margin-top: 2rem;
      padding: 1.5rem;
      background: white;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }


    .instructions ul {
      list-style: none;
      color: #4b5563;
      font-size: 0.875rem;
      line-height: 1.8;
    }
	
@media screen and (max-width:1279px) {
	.carousel-controls { margin-top:10px; }
	.carousel-btn { width:40px; height:40px; font-size:2.5em; }
	.carousel-indicators { margin-top:10px; padding-right:6px; }
}