@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: url(./assets/cursor.cur) 8 8, auto;
        }

        #loading-bar {
          position: fixed;
          top: 0;
          left: 0;
          height: 5px;
          background: linear-gradient(145deg, rgb(255, 136, 0), #b44b00);
          width: 0;
          z-index: 1000;
          transition: width 3s ease-in-out;
        }

        ::-webkit-scrollbar {
          border-radius: 50px;
          background: linear-gradient(135deg, #1a1a2e, #16213e);
          box-shadow: 5px 5px 15px #000000 inset;
          width: 15px;
          height: auto;
          border: 0;
        }

        ::-webkit-scrollbar-thumb {
          border-radius: 50px;
          background: linear-gradient(145deg, rgb(255, 136, 0), #b44b00);
          box-shadow: 5px 5px 15px #000000 inset;
          border: 0;
        }

        html {
          scrollbar-gutter: stable;
          overflow: overlay;
        }
        

        .hidden {
          display: none;
          opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s, visibility 0.5s;
        }

        .banter-loader {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 72px;
          height: 72px;
          margin-left: -36px;
          margin-top: -36px;
          z-index: 12;
        }
        
        .banter-loader__box {
          float: left;
          position: relative;
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
        
        .banter-loader__box:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
        }
        
        .banter-loader__box:nth-child(3n) {
          margin-right: 0;
          margin-bottom: 6px;
        }
        
        .banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
          margin-left: 26px;
        }
        
        .banter-loader__box:nth-child(3):before {
          margin-top: 52px;
        }
        
        .banter-loader__box:last-child {
          margin-bottom: 0;
        }
        
        @keyframes moveBox-1 {
          9.0909090909% {
            transform: translate(-26px, 0);
          }
        
          18.1818181818% {
            transform: translate(0px, 0);
          }
        
          27.2727272727% {
            transform: translate(0px, 0);
          }
        
          36.3636363636% {
            transform: translate(26px, 0);
          }
        
          45.4545454545% {
            transform: translate(26px, 26px);
          }
        
          54.5454545455% {
            transform: translate(26px, 26px);
          }
        
          63.6363636364% {
            transform: translate(26px, 26px);
          }
        
          72.7272727273% {
            transform: translate(26px, 0px);
          }
        
          81.8181818182% {
            transform: translate(0px, 0px);
          }
        
          90.9090909091% {
            transform: translate(-26px, 0px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(1) {
          animation: moveBox-1 4s infinite;
        }
        
        @keyframes moveBox-2 {
          9.0909090909% {
            transform: translate(0, 0);
          }
        
          18.1818181818% {
            transform: translate(26px, 0);
          }
        
          27.2727272727% {
            transform: translate(0px, 0);
          }
        
          36.3636363636% {
            transform: translate(26px, 0);
          }
        
          45.4545454545% {
            transform: translate(26px, 26px);
          }
        
          54.5454545455% {
            transform: translate(26px, 26px);
          }
        
          63.6363636364% {
            transform: translate(26px, 26px);
          }
        
          72.7272727273% {
            transform: translate(26px, 26px);
          }
        
          81.8181818182% {
            transform: translate(0px, 26px);
          }
        
          90.9090909091% {
            transform: translate(0px, 26px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(2) {
          animation: moveBox-2 4s infinite;
        }
        
        @keyframes moveBox-3 {
          9.0909090909% {
            transform: translate(-26px, 0);
          }
        
          18.1818181818% {
            transform: translate(-26px, 0);
          }
        
          27.2727272727% {
            transform: translate(0px, 0);
          }
        
          36.3636363636% {
            transform: translate(-26px, 0);
          }
        
          45.4545454545% {
            transform: translate(-26px, 0);
          }
        
          54.5454545455% {
            transform: translate(-26px, 0);
          }
        
          63.6363636364% {
            transform: translate(-26px, 0);
          }
        
          72.7272727273% {
            transform: translate(-26px, 0);
          }
        
          81.8181818182% {
            transform: translate(-26px, -26px);
          }
        
          90.9090909091% {
            transform: translate(0px, -26px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(3) {
          animation: moveBox-3 4s infinite;
        }
        
        @keyframes moveBox-4 {
          9.0909090909% {
            transform: translate(-26px, 0);
          }
        
          18.1818181818% {
            transform: translate(-26px, 0);
          }
        
          27.2727272727% {
            transform: translate(-26px, -26px);
          }
        
          36.3636363636% {
            transform: translate(0px, -26px);
          }
        
          45.4545454545% {
            transform: translate(0px, 0px);
          }
        
          54.5454545455% {
            transform: translate(0px, -26px);
          }
        
          63.6363636364% {
            transform: translate(0px, -26px);
          }
        
          72.7272727273% {
            transform: translate(0px, -26px);
          }
        
          81.8181818182% {
            transform: translate(-26px, -26px);
          }
        
          90.9090909091% {
            transform: translate(-26px, 0px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(4) {
          animation: moveBox-4 4s infinite;
        }
        
        @keyframes moveBox-5 {
          9.0909090909% {
            transform: translate(0, 0);
          }
        
          18.1818181818% {
            transform: translate(0, 0);
          }
        
          27.2727272727% {
            transform: translate(0, 0);
          }
        
          36.3636363636% {
            transform: translate(26px, 0);
          }
        
          45.4545454545% {
            transform: translate(26px, 0);
          }
        
          54.5454545455% {
            transform: translate(26px, 0);
          }
        
          63.6363636364% {
            transform: translate(26px, 0);
          }
        
          72.7272727273% {
            transform: translate(26px, 0);
          }
        
          81.8181818182% {
            transform: translate(26px, -26px);
          }
        
          90.9090909091% {
            transform: translate(0px, -26px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(5) {
          animation: moveBox-5 4s infinite;
        }
        
        @keyframes moveBox-6 {
          9.0909090909% {
            transform: translate(0, 0);
          }
        
          18.1818181818% {
            transform: translate(-26px, 0);
          }
        
          27.2727272727% {
            transform: translate(-26px, 0);
          }
        
          36.3636363636% {
            transform: translate(0px, 0);
          }
        
          45.4545454545% {
            transform: translate(0px, 0);
          }
        
          54.5454545455% {
            transform: translate(0px, 0);
          }
        
          63.6363636364% {
            transform: translate(0px, 0);
          }
        
          72.7272727273% {
            transform: translate(0px, 26px);
          }
        
          81.8181818182% {
            transform: translate(-26px, 26px);
          }
        
          90.9090909091% {
            transform: translate(-26px, 0px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(6) {
          animation: moveBox-6 4s infinite;
        }
        
        @keyframes moveBox-7 {
          9.0909090909% {
            transform: translate(26px, 0);
          }
        
          18.1818181818% {
            transform: translate(26px, 0);
          }
        
          27.2727272727% {
            transform: translate(26px, 0);
          }
        
          36.3636363636% {
            transform: translate(0px, 0);
          }
        
          45.4545454545% {
            transform: translate(0px, -26px);
          }
        
          54.5454545455% {
            transform: translate(26px, -26px);
          }
        
          63.6363636364% {
            transform: translate(0px, -26px);
          }
        
          72.7272727273% {
            transform: translate(0px, -26px);
          }
        
          81.8181818182% {
            transform: translate(0px, 0px);
          }
        
          90.9090909091% {
            transform: translate(26px, 0px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(7) {
          animation: moveBox-7 4s infinite;
        }
        
        @keyframes moveBox-8 {
          9.0909090909% {
            transform: translate(0, 0);
          }
        
          18.1818181818% {
            transform: translate(-26px, 0);
          }
        
          27.2727272727% {
            transform: translate(-26px, -26px);
          }
        
          36.3636363636% {
            transform: translate(0px, -26px);
          }
        
          45.4545454545% {
            transform: translate(0px, -26px);
          }
        
          54.5454545455% {
            transform: translate(0px, -26px);
          }
        
          63.6363636364% {
            transform: translate(0px, -26px);
          }
        
          72.7272727273% {
            transform: translate(0px, -26px);
          }
        
          81.8181818182% {
            transform: translate(26px, -26px);
          }
        
          90.9090909091% {
            transform: translate(26px, 0px);
          }
        
          100% {
            transform: translate(0px, 0px);
          }
        }
        
        .banter-loader__box:nth-child(8) {
          animation: moveBox-8 4s infinite;
        }
        
        @keyframes moveBox-9 {
          9.0909090909% {
            transform: translate(-26px, 0);
          }
        
          18.1818181818% {
            transform: translate(-26px, 0);
          }
        
          27.2727272727% {
            transform: translate(0px, 0);
          }
        
          36.3636363636% {
            transform: translate(-26px, 0);
          }
        
          45.4545454545% {
            transform: translate(0px, 0);
          }
        
          54.5454545455% {
            transform: translate(0px, 0);
          }
        
          63.6363636364% {
            transform: translate(-26px, 0);
          }
        
          72.7272727273% {
            transform: translate(-26px, 0);
          }
        
          81.8181818182% {
            transform: translate(-52px, 0);
          }
        
          90.9090909091% {
            transform: translate(-26px, 0);
          }
        
          100% {
            transform: translate(0px, 0);
          }
        }
        
        .banter-loader__box:nth-child(9) {
          animation: moveBox-9 4s infinite;
        }

    .bg-img {
      position: bottom center;
      object-fit: cover;
      position: fixed;
      z-index: -10;
      opacity: 0.3;
    }

        body {
            font-family: 'Orbitron', monospace;
            background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e);
            min-height: 100vh;
            z-index: 1;
            margin: 0;
        }

        main {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: -1;
        }

        .title {
            color: #ff9900;
            font-size: 3rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.3rem;
            margin-top: 15px;
            margin-bottom: 2rem;
            text-shadow: 0 0 30px #ffb300, 0 0 60px #ff9d00;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { text-shadow: 0 0 30px #ffaa00, 0 0 60px #ffaa00; }
            50% { text-shadow: 0 0 50px #ffaa00, 0 0 100px #ffaa00, 0 0 150px #ffaa00; }
        }

        .drum-kit {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            border: 1px solid rgba(255, 204, 0, 0.456);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .key {
            width: 120px;
            height: 120px;
            border: 2px solid #ffe600;
            border-radius: 15px;
            background: linear-gradient(145deg, #1a1a2e, #0f0f23);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            position: relative;
            overflow: hidden;
        }

        .key::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 136, 0, 0.1), transparent);
            transform: rotate(-45deg);
            transition: all 0.3s ease;
            opacity: 0;
        }

        .key:hover::before {
            opacity: 1;
            animation: shine 0.6s ease-in-out;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(-45deg); }
        }

        .key-letter {
            font-size: 2rem;
            font-weight: 700;
            color: #ffaa00;
            text-shadow: 0 0 10px #ffaa00;
            margin-bottom: 0.5rem;
        }

        .key-sound {
            font-size: 0.8rem;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            opacity: 0.7;
        }

        .key:hover {
            transform: scale(1.05) translateY(-5px);
            border-color: #ffae00;
            box-shadow: 0 15px 30px rgba(255, 174, 0, 0.321), 0 0 30px rgba(255, 166, 0, 0.5);
        }

        .key.playing {
            transform: scale(0.95);
            border-color: #ff6600ca;
            background: linear-gradient(145deg, rgb(255, 136, 0), #b44b00);
            box-shadow: 0 0 50px #ff6a0092, inset 0 0 20px rgba(255, 255, 255, 0.2);
        }

        .key.playing .key-letter {
            color: #8d0000;
            text-shadow: 0 0 20px #fd0000;
        }

        .key.playing .key-sound {
          color: #8d0000;
          text-shadow: #fd0000;
          opacity: 0.7;
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .particle {
            position: absolute;
            background: #ffe600;
            border-radius: 50%;
            opacity: 0.6;
            animation: float 6s infinite ease-in-out;
        }

        .instructions {
          height: auto;
          width: 100%;
          padding: 10px;
          background-color: rgba(0, 0, 0, 0.3);
          margin-top: 2rem;
          margin-left: 0;
          margin-bottom: 0;
          margin-right: 0;
          color: #ffe600;
          text-align: center;
          font-size: 1rem;
          opacity: 0.8;
          letter-spacing: 0.1rem;
      }

        main footer {
          margin: 0;
          height: auto;
          width: 100%;
          text-align: center;
          padding: 10px;
          background-color: rgba(0, 0, 0, 0.5);
          box-shadow: 5px 5px 15px #0a0a0a;
          color: #ff99008e;
        }

        @keyframes rainbow {
          0% {
              background-position: 0% 50%;
          }
          100% {
              background-position: 200% 50%;
          }
      }

      .rainbow-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: transform 200ms ease-in-out, background-color 150ms ease-in-out;
        outline: none;
        box-shadow: 0 0 0 2px transparent, 0 0 0 2px transparent;
        height: 2.5rem;
        padding: 0 1rem;
        position: relative;
        margin-left: 20%;
        z-index: 1;

        /* --- RAINBOW BORDER AND INNER FADE --- */
        border: calc(0.08 * 1rem) solid transparent;
        background-origin: border-box;
        background-clip: padding-box, border-box, border-box;
        background-size: 200% 100%;
        background-image:
            linear-gradient(#fff, #fff),
            linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0) 80%),
            linear-gradient(90deg, hsl(0,100%,63%), hsl(90,100%,63%), hsl(210,100%,63%), hsl(195,100%,63%), hsl(270,100%,63%));
        background-position: center center, bottom center, 0% 50%;
        background-repeat: no-repeat, no-repeat, repeat-x;
        background-size: auto, 100% 100%, 200% 100%;
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(to top, rgba(255,255,255,0.6), rgba(255,255,255,0)) border-box,
            linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%)) border-box;
        background-size: auto, 100% 0.3rem, 200% 100%;
        background-position: center center, bottom center, 0% 50%;
        background-repeat: no-repeat, no-repeat, repeat-x;
        background-origin: padding-box, border-box, border-box;
        background-clip: padding-box, border-box, border-box;
        animation: rainbow 8s linear infinite;
    }

      .rainbow-button:disabled {
          pointer-events: none;
          opacity: 0.5;
      }

      .rainbow-button::before {
          content: '';
          position: absolute;
          bottom: -20%;
          left: 50%;
          z-index: 0;
          height: 20%;
          width: 60%;
          transform: translateX(-50%);
          background: linear-gradient(90deg, hsl(0, 100%, 63%), hsl(90, 100%, 63%), hsl(210, 100%, 63%), hsl(195, 100%, 63%), hsl(270, 100%, 63%));
          filter: blur(calc(0.8 * 1rem));
          animation: rainbow 8s linear infinite;
      }

      @media (prefers-color-scheme: dark) {
          .rainbow-button {
            background:
            linear-gradient(#121213, #121213) padding-box,
            linear-gradient(to top, rgba(18, 18, 19, 0.6), rgba(18, 18, 19, 0)) border-box,
            linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%)) border-box;

        background-size: auto, 100% 0.3rem, 200% 100%;
        background-position: center center, bottom center, 0% 50%;
        background-repeat: no-repeat, no-repeat, repeat-x;
        background-origin: padding-box, border-box, border-box;
        background-clip: padding-box, border-box, border-box;

        color: #ffffff;
          }
      }

      .rainbow-button:hover {
          transform: scale(1.05);
      }

      .rainbow-button:active {
          transform: scale(0.95);
      }

      .button-content {
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2;
          position: relative;
      }

      .button-content svg {
        width: 1rem;
        height: 1rem;
        fill: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        .button-content svg {
            fill: #ffffff;
        }
    }

      .button-text {
          margin-left: 0.25rem;
          color: #ffffff;
          padding: 0.25rem;
      }

      .star-count-container {
          margin-left: 0.5rem;
          display: flex;
          align-items: center;
          gap: 0.25rem;
          font-size: 0.875rem;
          z-index: 2;
          position: relative;
      }

      .star-icon {
          width: 1rem;
          height: 1rem;
          color: #6b7280;
          transition: all 200ms ease-in-out;
      }

      .rainbow-button:hover .star-icon {
          color: #fcd34d;
      }

      .star-count-number {
          display: inline-block;
          font-variant-numeric: tabular-nums;
          letter-spacing: 0.05em;
          font-family: 'Inter', sans-serif;
          font-weight: 500;
          color: #000000;
      }

      .button-link-wrapper {
        text-decoration: none;
        display: inline-block;
      }

      .button-link-wrapper:hover .rainbow-button {
        transform: scale(1.05);
    }

    .button-link-wrapper:active .rainbow-button {
      transform: scale(0.95);
  }

      @media (prefers-color-scheme: dark) {
          .star-count-number {
              color: #ffffff;
          }
      }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
        }

        @media (max-width: 768px) {
            .drum-kit {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            .key {
                width: 100px;
                height: 100px;
            }
            .title {
                font-size: 2rem;
            }
        }