:root {
        --color-empty: #f8fafc;
        --color-start: #16a34a;
        --color-end: #dc2626;
        --color-wall: #64748b;
        --color-frontier: #eab308;
        --color-visited: #60a5fa;
        --color-path: #22c55e;
        --color-path-glow: rgba(34, 197, 94, 0.35);
        --color-mud: #92400e;
        --color-water: #0284c7;
        --color-grass: #65a30d;
      }

      .dark {
        --color-empty: #1e293b;
        --color-start: #16a34a;
        --color-end: #f87171;
        --color-wall: #475569;
        --color-frontier: #eab308;
        --color-visited: #3b82f6;
        --color-path: #4ade80;
        --color-path-glow: rgba(74, 222, 128, 0.35);
        --color-mud: #a16207;
        --color-water: #0284c7;
        --color-grass: #84cc16;
      }

      body {
        font-family: "Poppins", system-ui, sans-serif;
      }

      .gradient-title {
        background: linear-gradient(
          90deg,
          #0d47a1,
          #1976d2 25%,
          #0284c7 60%,
          #6366f1 90%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      #canvas {
        background: transparent;
        cursor: crosshair;
        touch-action: none;
        display: block;
        width: 100%;
        height: 100%;
      }

      .canvas-container {
        width: 100%;
        height: clamp(100px, calc(100vh - 200px), 800px);
        aspect-ratio: 1 / 1;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
      }

      /* Scrollbar styling */
      .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
      }

      .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
      }

      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
      }

      .dark .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #475569;
      }

      /* Legend swatches */
      .legend-swatch {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .dark .legend-swatch {
        border-color: rgba(255, 255, 255, 0.2);
      }

      /* Button active states */
      .algo-btn[aria-pressed="true"] {
        background: linear-gradient(135deg, #2563eb, #6366f1);
        color: white;
        border-color: #2563eb;
      }

      .terrain-btn.active {
        border-color: #3b82f6;
        background-color: rgba(59, 130, 246, 0.1);
      }

      /* Range slider styling */
      input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        background: #011b44;
        cursor: pointer;
        border-radius: 10px;
        height: 7px;
      }

      input[type="range"]::-webkit-slider-track {
        background: #e2e8f0;
        height: 8px;
        border-radius: 4px;
      }

      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #3b82f6;
        border-radius: 50%;
        cursor: pointer;
      }

      .dark input[type="range"]::-webkit-slider-track {
        background: #334155;
      }

      .dark input[type="range"]::-webkit-slider-thumb {
        background: #0ea5e9;
      }

      /* Theme toggle */
      .theme-toggle {
        width: 60px;
        height: 30px;
        background: #cbd5e1;
        border-radius: 15px;
        position: relative;
        cursor: pointer;
        transition: background 0.3s;
      }

      .dark .theme-toggle {
        background: #475569;
      }

      .theme-toggle::after {
        content: "☀️";
        position: absolute;
        width: 24px;
        height: 24px;
        background: white;
        border-radius: 50%;
        top: 3px;
        left: 3px;
        transition: transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }

      .dark .theme-toggle::after {
        content: "🌙";
        transform: translateX(30px);
      }