* {
      margin:0; padding:0; box-sizing: border-box;
      font-family: 'Inter', sans-serif;
    }
    html, body {
      height: 100%; width: 100%;
      background: #000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #container {
     position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
    }

    #gradientBox {
     position: absolute;
     width: 100%;
      height: 100%;
     z-index: 0;
    }

    #noiseCanvas {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
    }

    .toolbar {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #111;
      border: 1px solid #333;
      border-radius: 9999px;
      padding: 6px 14px;
      display: flex;
      gap: 12px;
      align-items: center;
      max-width: 95vw;
      overflow-x: auto;
      box-shadow: 0 8px 20px rgba(0,0,0,0.5);
      user-select: none;
      z-index: 10;
    }
    .toolbar label {
      display: flex;
      flex-direction: column;
      font-size: 11px;
      color: #ccc;
      align-items: center;
      min-width: 48px;
      user-select: none;
    }
    .toolbar input[type=color] {
      width: 28px;
      height: 24px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    .toolbar input[type=range] {
      width: 70px;
      cursor: pointer;
      -webkit-appearance: none;
      background: #222;
      border-radius: 8px;
      height: 8px;
      margin-top: 4px;
    }
    .toolbar input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      background: #888;
      border-radius: 50%;
      cursor: pointer;
      border: 1px solid #555;
      margin-top: -4px;
    }
    .toolbar select {
      background: #222;
      border: 1px solid #444;
      border-radius: 9999px;
      color: white;
      font-size: 12px;
      padding: 4px 10px;
      cursor: pointer;
      min-width: 80px;
    }
    .toolbar button {
      background: #222;
      color: white;
      border: none;
      padding: 6px 14px;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 13px;
      user-select: none;
      white-space: nowrap;
      transition: background 0.2s ease;
    }
    .toolbar button:hover {
      background: #444;
    }
    @media (max-width: 600px) {
      .toolbar {
        padding: 6px 12px;
        gap: 8px;
      }
      .toolbar label {
        min-width: 40px;
        font-size: 10px;
      }
      .toolbar input[type=range] {
        width: 50px;
      }
      .toolbar select {
        min-width: 70px;
      }
    }
    .github-corner {
      fill:#fff;
      color:#151513;
      position: absolute;
      top: 0;
      right: 0;
      border: 0;
      z-index: 20;
    }
    .github-corner:hover .octo-arm{
      animation:octocat-wave 560ms ease-in-out;
      transform-origin: 130px 106px;
    }
    @keyframes octocat-wave{
      0%,100%{transform:rotate(0)}
      20%,60%{transform:rotate(-25deg)}
      40%,80%{transform:rotate(10deg)}
    }
    @media (max-width:500px){
      .github-corner:hover .octo-arm{
        animation:none;
      }
      .github-corner .octo-arm{
        animation:octocat-wave 560ms ease-in-out;
      }
    }