body {


    background-color: #000000;
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    color: aliceblue;
    font-size: 16px;
    }

    .top-links {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 5;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .top-links a,
    .top-links button,
    .modal-btn {
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.52);
      color: aliceblue;
      cursor: pointer;
      font: inherit;
      text-decoration: none;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .top-links a,
    .top-links button {
      border-radius: 6px;
      font-size: 12px;
      line-height: 1;
      padding: 7px 9px;
    }

    .top-links a:hover,
    .top-links button:hover,
    .modal-btn:hover {
      background: rgba(3, 191, 15, 0.32);
      border-color: rgba(255, 255, 255, 0.7);
    }
    
    
    #gradient {
          width: 100%;
          min-height: 100vh;
          padding: 0px;
          margin: 0px;
      text-align: center;
          align-items: center;
          justify-content: center;
        }
    
    
        #grid {
          width: 312px;
          height: 312px;
          display: grid;
          grid-template-columns: repeat(4, 77px);
          grid-template-rows: repeat(4, 77px);
          gap: 1px;
          align-items: center;
          justify-content: center;
          text-align: center;
          margin: 0 auto;
        
    
        }
        #box {
          width: 312px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
        position: absolute;
        }
    
        .score-display {
    
          text-align: center;
        
        }
    
        h1 {
          margin: 0;
        }

        .corner-title {
          position: fixed;
          left: 12px;
          bottom: 10px;
          z-index: 5;
          font-size: 15px;
          letter-spacing: 0;
          opacity: 0.58;
        }

        .highlight-control {
          position: fixed;
          right: 12px;
          bottom: 10px;
          z-index: 5;
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          opacity: 0.82;
        }
    
        h6 {
          font-size: 16px;
          padding: 10px;
          opacity: 0.5;
        }
    
        @keyframes beat {
        0% { transform: scale(1); }
        50% { transform: scale(1.01); }
        100% { transform: scale(1); }
    }
    
    .beat {
        display: grid;
        animation: beat 2s infinite;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0, 0, 0, 0.62);
    }

    .modal-overlay.is-visible {
      display: flex;
    }

    .modal-card {
      width: min(330px, 100%);
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.86);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
      padding: 20px;
      text-align: left;
    }

    .modal-card h2 {
      margin: 0 0 10px;
      font-size: 20px;
      font-weight: 700;
      opacity: 0.88;
    }

    .modal-card p {
      margin: 0 0 12px;
      line-height: 1.45;
      opacity: 0.72;
    }

    .modal-btn {
      border-radius: 6px;
      margin-top: 4px;
      padding: 9px 12px;
    }
    
        /* Style the toggle switch handle */
        .toggle-handle {
          position: absolute;
          top: 2px;
          left: 2px;
          width: 26px;
          height: 26px;
          background-color: #fff;
          border-radius: 50%;
          transition: transform 0.3s ease;
        }
    
            /* Hide the default checkbox */
            .toggle-checkbox {
          display: none;
        }
    
        /* Style the toggle switch label */
        .toggle-label {
          display: inline-block;
          cursor: pointer;
          width: 60px;
          height: 30px;
          background-color: #ccc;
          border-radius: 15px;
          position: relative;
        }
    
        
        .switch {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 34px;
        }
    
        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
    
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #0a0a0a;
          transition: 0.4s;
          border-radius: 34px;
        }
    
        
        .slider:before {
          position: absolute;
          content: "";
          height: 26px;
          width: 26px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: 0.4s;
          border-radius: 50%;
        }
    
        input:checked+.slider {
          background-color: #03bf0f;
        }
    
        input:checked+.slider:before {
          transform: translateX(26px);
        }