.draw {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  
  .drawing-container {
    svg {
      cursor: crosshair;
      overflow: hidden;
    }

    /* Grid styles */
    .grid {
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"%3E%3Cpath fill="none" stroke="%23D1D5DB" stroke-width="0.5" d="M40 0v40H0"/%3E%3C/svg%3E');
      background-size: 40px 40px;
    }

    .ruled {
      background-image: linear-gradient(transparent 95%, #d1d5db 5%);
      background-size: 100% 40px;
    }

    .dotted {
      background-image: radial-gradient(#d1d5db 2px, transparent 2px);
      background-size: 40px 40px;
    }

    /* Dark mode styles */
    .dark .grid {
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"%3E%3Cpath fill="none" stroke="%236B7280" stroke-width="0.5" d="M40 0v40H0"/%3E%3C/svg%3E');
      background-size: 40px 40px;
    }

    .dark .ruled {
      background-image: linear-gradient(transparent 95%, #6b7280 5%);
      background-size: 100% 40px;
    }

    .dark .dotted {
      background-image: radial-gradient(#6b7280 2px, transparent 2px);
      background-size: 40px 40px;
    }
  }
}
