* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Space Mono', monospace;
       background: #2d0a4e;
       color: #f0e6ff;
   }

   main {
       width: 100%;
       min-height: 100vh;
   }

   .container {
       margin: 0 auto;
       padding: 60px 40px;
   }

   .section.buffer {
       background: #4a148c;
       padding: 60px 0;
   }

   .main-title {
       font-size: 48px;
       text-align: center;
       margin-bottom: 20px;
       font-weight: normal;
       letter-spacing: 2px;
       color: #f0e6ff;
   }

   .sub-title {
       font-size: 24px;
       text-align: center;
       color: #e919ff;
       font-weight: normal;
       margin-bottom: 40px;
   }

   .no-margin-top {
       margin-top: 0;
   }

   /* Slideshow Styles */
   .slideshow-wrapper {
       width: 100%;
       background: #1a0033;
       padding: 40px;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(233, 25, 255, 0.2);
       border: 2px solid #e919ff;
   }

   .slide {
       display: none;
       width: 100%;
       text-align: center;
   }

   .slide.active {
       display: block;
       animation: fadeIn 0.5s ease-in;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   .slide img {
       width: 100%;
       height: auto;
       object-fit: contain;
       border-radius: 4px;
   }

   .progress-bar {
       width: 100%;
       height: 3px;
       background: #4a148c;
       margin-bottom: 30px;
       border-radius: 2px;
   }

   .progress-fill {
       height: 100%;
       background: linear-gradient(90deg, #e919ff 0%, #00d9ff 100%);
       transition: width 0.3s ease;
       border-radius: 2px;
   }

   .controls {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 30px 0 0 0;
       gap: 20px;
   }

   button {
       background: #e919ff;
       color: #1a0033;
       border: 2px solid #00d9ff;
       padding: 12px 28px;
       border-radius: 4px;
       cursor: pointer;
       font-size: 15px;
       font-family: 'Space Mono', monospace;
       font-weight: normal;
       transition: all 0.3s ease;
       box-shadow: 0 0 10px rgba(233, 25, 255, 0.5);
   }

   button:hover {
       background: #00d9ff;
       color: #1a0033;
       box-shadow: 0 0 20px rgba(0, 217, 255, 0.8);
   }

   button:active {
       transform: scale(0.98);
   }

   .counter {
       font-size: 16px;
       color: #00d9ff;
       min-width: 80px;
       text-align: center;
       font-family: 'Space Mono', monospace;
   }

   @media (max-width: 768px) {
       .container {
           padding: 40px 20px;
       }

       .main-title {
           font-size: 36px;
       }

       .sub-title {
           font-size: 18px;
       }

       .slideshow-wrapper {
           padding: 30px 20px;
       }

       .controls {
           flex-direction: column;
           gap: 15px;
       }

       button {
           width: 100%;
       }
   }