html, body {
      margin: 0;
      overflow: hidden;
      background: #111;
      font-family: sans-serif;
      overscroll-behavior: none;   /* avoid rubber-banding */
      height:100%;
    }
    #controls {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    button, input[type="range"], input[type="file"] {
      background: transparent;
      color: #fff;
      border: transparent;
      border-radius: 5px;
      padding: 6px 12px;
      cursor: pointer;
    }
    label {
      color: #0ff;
    }
    #startToggle {
      position: absolute;
      border: 0;
      padding:0;
      background: transparent;
      color: red;
      font-size: 5vh;
      height: 5vh;
      width: 5vh;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      visibility: visible;
      pointer-events: auto;
    }

    #legendPanel {
      background: rgba(0, 0, 0, 0.85);
      border: 2px solid #0ff;
      color: white;
      padding: 10px;
      display:none;
    }
    .legend-toggle {
      background: #222;
      color: #FFF;
      font-weight: bold;
      cursor: pointer;
    }
    .legend-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;

    }
    .legend-color {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 8px;
    }
    .settingsPanelControl {
      padding-top:12px;
    } 
    #quantizeToggle.toggle-on {
    background: #0f0;
    color: #000;
    }
    #quantizeToggle.toggle-off {
      background: #444;
      color: #fff;
    }
    #shareBtn{
      position:fixed;
      right:1em;
      top: 1em;
      z-index: 2; /* to keep it on top of the canvas */
    }
  
    :root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

    #speedSlider{
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(10px + var(--safe-bottom)); /* ↑ avoid Android gesture area */
      height: 32px;               /* bigger touch target */
      z-index: 2147483647;        /* ↑ guarantees it sits above all overlays */
      pointer-events: auto;
      touch-action: pan-x;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
    }

    /* WebKit track & thumb so it stays visible when appearance is none */
    #speedSlider::-webkit-slider-runnable-track{
      height: 8px;
      background: rgba(255,255,255,0.2);
      border-radius: 999px;
      border: 1px solid rgba(0,255,255,0.5);
    }
    #speedSlider::-webkit-slider-thumb{
      -webkit-appearance: none;
      appearance: none;
      width: 24px; height: 24px; border-radius: 50%;
      background: #0ff; border: 2px solid #111;
      margin-top: -8px;           /* center over 8px track */
    }

    /* Firefox */
    #speedSlider::-moz-range-track{
      height: 8px;
      background: rgba(255,255,255,0.2);
      border-radius: 999px;
      border: 1px solid rgba(0,255,255,0.5);
    }
    #speedSlider::-moz-range-thumb{
      width: 24px; height: 24px; border-radius: 50%;
      background: #0ff; border: 2px solid #111;
    }


    .material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
    }
    .material-symbols-outlined {
      font-size:3vh!important;
    }
    #startToggle.material-symbols-outlined {
      font-size:5vh!important;
    } 
    #wrapper {
      position: fixed;
      width: 100%;
      height: 100%;
      inset: 0;
      /* z-index: 1; /* above the canvas */
    }

    #canvas {
      display: block;
      position: fixed;
      top:0;
      left:0;
      z-index:0;
    }

    #buttonWrapper {
      position: fixed;
      inset:0;
      z-index: 1;
      pointer-events: none;
      
    }



  /* @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi), 
  (min-resolution: 2dppx) {
  */
      /* High pixel density styles go here */
  /*    #startToggle{
        height:5vh;
        width:5vh;
      }
      #startToggle.material-symbols-outlined {
      font-size:5vh!important;
      } 

      .material-symbols-outlined {
        font-size:3vh!important;
      }
      #legendPanel{
        font-size: 2rem;
      }
  } */