diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..079fce1
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,348 @@
+:root {
+  --bg: #0f172a;
+  --panel: #1e293b;
+  --grid-bg: #1e293b;
+  --cell: #334155;
+  --cell-border: #1e293b;
+  --wall: #0f172a;
+  --start: #22c55e;
+  --goal: #ef4444;
+  --visited: #38bdf8;
+  --current: #7dd3fc;
+  --path: #facc15;
+  --path-glow: rgba(250, 204, 21, 0.9);
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  background: radial-gradient(circle at 20% 10%, #1e293b, #0f172a 70%);
+  min-height: 100vh;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  color: var(--text);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20px;
+}
+
+.container {
+  max-width: 920px;
+  width: 100%;
+}
+
+header { text-align: center; margin-bottom: 16px; }
+
+h1 {
+  font-size: 2.2rem;
+  background: linear-gradient(135deg, #22d3ee, #a78bfa);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 0.5px;
+}
+
+.subtitle {
+  color: var(--muted);
+  margin-top: 4px;
+  font-size: 0.95rem;
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  background: var(--panel);
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.btn {
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.2s ease, opacity 0.2s;
+  color: #fff;
+}
+
+.btn:active { transform: scale(0.97); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary {
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+}
+.btn-primary:hover:not(:disabled) {
+  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.6);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: #475569;
+}
+.btn-secondary:hover:not(:disabled) {
+  background: #64748b;
+}
+
+.speed-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.speed-wrap input[type="range"] {
+  accent-color: #22d3ee;
+  cursor: pointer;
+}
+
+#speed-value {
+  min-width: 20px;
+  text-align: center;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
+.dot-start { background: var(--start); }
+.dot-goal { background: var(--goal); }
+
+.grid-wrap {
+  background: var(--panel);
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 12px;
+  overflow-x: auto;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(25, 1fr);
+  gap: 1px;
+  background: var(--cell-border);
+  margin: 0 auto;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  max-width: 640px;
+}
+
+.cell {
+  aspect-ratio: 1 / 1;
+  background: var(--cell);
+  position: relative;
+  cursor: crosshair;
+  border-radius: 2px;
+  transition: background 0.05s ease, box-shadow 0.15s ease;
+  min-width: 8px;
+}
+
+.cell:hover { filter: brightness(1.2); }
+
+.cell.wall {
+  background: var(--wall);
+  box-shadow: inset 0 0 0 1px #0f172a;
+}
+.cell.wall::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 3px,
+    rgba(15, 23, 42, 0.85) 3px,
+    rgba(15, 23, 42, 0.85) 5px
+  );
+}
+
+.cell.start {
+  background: var(--start);
+  cursor: grab;
+  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
+}
+.cell.start::after {
+  content: '🟢';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(10px, 2.2vw, 18px);
+}
+.cell.start.dragging { cursor: grabbing; filter: brightness(1.3); }
+
+.cell.goal {
+  background: var(--goal);
+  cursor: grab;
+  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+}
+.cell.goal::after {
+  content: '🎯';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(10px, 2.2vw, 18px);
+}
+.cell.goal.dragging { cursor: grabbing; filter: brightness(1.3); }
+
+.cell.visited {
+  background: var(--visited);
+  animation: popIn 0.2s ease;
+}
+
+.cell.current {
+  background: var(--current);
+  box-shadow: 0 0 8px rgba(125, 211, 252, 0.8);
+  animation: pulseCurrent 0.4s ease-in-out infinite alternate;
+}
+
+.cell.path {
+  background: var(--path);
+  animation: pathGlow 1s ease-in-out infinite alternate;
+  z-index: 2;
+}
+.cell.path::before {
+  content: '✦';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(8px, 1.8vw, 14px);
+  color: #7a5b00;
+}
+
+@keyframes popIn {
+  0% { transform: scale(0.8); opacity: 0.5; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes pulseCurrent {
+  0% { filter: brightness(1); }
+  100% { filter: brightness(1.4); }
+}
+
+@keyframes pathGlow {
+  0% { box-shadow: 0 0 6px var(--path-glow); }
+  100% { box-shadow: 0 0 18px var(--path-glow), 0 0 30px var(--path-glow); }
+}
+
+/* ─── Responsive ─── */
+@media (max-width: 700px) {
+  .grid-wrap { padding: 6px; }
+  .cell { border-radius: 1px; }
+  h1 { font-size: 1.6rem; }
+  .controls { gap: 6px; }
+  .btn { padding: 8px 10px; font-size: 0.8rem; }
+  .legend { font-size: 0.7rem; flex-wrap: wrap; }
+}
+
+/* ─── Toast (Yol Bulunamadı — kırmızı neon) ─── */
+.toast {
+  position: fixed;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-120%);
+  background: rgba(127, 29, 29, 0.95);
+  border: 2px solid #ff4d4d;
+  border-radius: 14px;
+  padding: 18px 28px;
+  color: #fff;
+  text-align: center;
+  font-weight: 700;
+  font-size: 1.2rem;
+  z-index: 999;
+  box-shadow: 0 0 20px rgba(255, 77, 77, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
+  animation: neonToast 1.2s ease-in-out infinite alternate;
+  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.3s ease;
+  pointer-events: none;
+  max-width: 90vw;
+  opacity: 0;
+}
+
+.toast.show {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}
+
+.toast-icon { font-size: 1.8rem; display: block; margin-bottom: 4px; }
+
+.toast-sub {
+  font-weight: 400;
+  font-size: 0.85rem;
+  color: #ffd6d6;
+  margin-top: 8px;
+}
+
+@keyframes neonToast {
+  0% {
+    box-shadow: 0 0 15px rgba(255, 77, 77, 0.7), 0 0 40px rgba(255, 0, 0, 0.3);
+    border-color: #ff4d4d;
+  }
+  100% {
+    box-shadow: 0 0 30px rgba(255, 77, 77, 1), 0 0 80px rgba(255, 0, 0, 0.7);
+    border-color: #ffdddd;
+  }
+}
+
+/* ─── Legend ─── */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  justify-content: center;
+  margin-top: 14px;
+  font-size: 0.8rem;
+  color: var(--muted);
+  user-select: none;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  display: inline-block;
+}
+.wall-swatch { background: #0f172a; border: 1px solid #334155; }
+.start-swatch { background: var(--start); }
+.goal-swatch { background: var(--goal); }
+.visited-swatch { background: var(--visited); }
+.current-swatch { background: var(--current); }
+.path-swatch { background: var(--path); }