html, body { font-family: 'Roboto', Arial, sans-serif; background: #0f172a; scroll-behavior: smooth;}
    #img-canvas-container {
      aspect-ratio: 16/10;
      overflow: hidden;
      max-width: 100%;
      max-height: 500px;
      position: relative;
    }
    #img-canvas {
      transition: transform 0.05s ease-out;
      cursor: none; /* Hidden because we use a custom precision loupe cursor */
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
    }
    
    /* Live Loupe / Magnifying Eye Split System */
    #color-loupe {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid #fff;
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
      pointer-events: none;
      display: none;
      z-index: 50;
      overflow: hidden;
      background-repeat: no-repeat;
    }
    #loupe-crosshair {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px #000;
      pointer-events: none;
    }
    /* Separate target pointer dot at mouse coordinate */
    #picker-pointer {
      position: absolute;
      width: 12px;
      height: 12px;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px #000;
      pointer-events: none;
      display: none;
      z-index: 51;
    }