:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0d1117;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}*{box-sizing:border-box}:root{--node-size: 25px}@media(max-width:600px){:root{--node-size: 20px}}.node{width:var(--node-size);height:var(--node-size);outline:1px solid #30363d;display:inline-block;-webkit-user-select:none;user-select:none;transition:background-color .2s ease-out}.node-start{background-color:#238636}.node-end{background-color:#da3633}.node-wall{background-color:#484f58;border:none}.node-visited{animation-name:visitedAnimation;animation-duration:1.5s;animation-timing-function:ease-out;animation-delay:0;animation-direction:alternate;animation-iteration-count:1;animation-fill-mode:forwards;animation-play-state:running}@keyframes visitedAnimation{0%{transform:scale(.3);background-color:#00bedabf;border-radius:100%}50%{background-color:#1168d9bf}75%{transform:scale(1.2);background-color:#00d99fbf}to{transform:scale(1);background-color:#00bedabf}}.node-path{animation-name:shortestPath;animation-duration:1.5s;animation-timing-function:ease-out;animation-delay:0;animation-direction:alternate;animation-iteration-count:1;animation-fill-mode:forwards;animation-play-state:running}@keyframes shortestPath{0%{transform:scale(.6);background-color:khaki}50%{transform:scale(1.2);background-color:khaki}to{transform:scale(1);background-color:khaki}}.grid{display:flex;flex-direction:column;line-height:0;-webkit-user-select:none;user-select:none;touch-action:none}.grid-row{display:flex}#root{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}@media(max-width:768px){#root{height:auto;min-height:100vh;overflow:auto}}.app{display:flex;flex-direction:column;width:100%;height:100%;background-color:#0d1117;color:#c9d1d9}.header{padding:1.5rem 2rem;background:#161b22cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #30363d;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:1rem}@media(max-width:1024px){.header{padding:1rem}.instructions{display:none}}@media(max-width:768px){.header{flex-direction:column;align-items:stretch}.brand{text-align:center}.controls{overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;justify-content:center}.settings{justify-content:center}}.header h1{font-size:1.25rem;font-weight:600;margin:0;letter-spacing:-.025em}.subtitle{font-size:.75rem;color:#8b949e;margin:0}.instructions{background:#30363d66;padding:.5rem 1.25rem;border-radius:20px;border:1px solid #30363d;font-size:.85rem;color:#c9d1d9;max-width:400px}.instructions span{color:#1f6feb;font-weight:600}.settings{display:flex;align-items:center;gap:.5rem;background:#30363d66;padding:.4rem .8rem;border-radius:8px;border:1px solid #30363d;font-size:.85rem}.speed-select{background:#0d1117;color:#c9d1d9;border:1px solid #30363d;border-radius:4px;padding:2px 4px;cursor:pointer;font-size:.8rem}.controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid transparent;white-space:nowrap}.btn-primary{background:#238636;color:#fff}.btn-primary:hover{background:#2ea043}.btn-secondary{background:#1f6feb;color:#fff}.btn-secondary:hover{background:#388bfd}.btn-info{background:#8957e5;color:#fff}.btn-info:hover{background:#a371f7}.btn-warning{background:#d29922;color:#fff}.btn-warning:hover{background:#e3b341}.divider{width:1px;height:24px;background:#30363d;margin:0 .25rem;flex-shrink:0}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#161b22;min-width:160px;box-shadow:0 8px 16px #00000080;z-index:1000;border-radius:8px;border:1px solid #30363d;margin-top:4px;overflow:hidden}.dropdown-content button{color:#c9d1d9;padding:12px 16px;text-decoration:none;display:block;width:100%;border:none;background:none;text-align:left;cursor:pointer;font-size:.875rem}.dropdown-content button:hover{background-color:#30363d}.dropdown:hover .dropdown-content{display:block}@media(max-width:768px){.dropdown:hover .dropdown-content{display:none}.dropdown.active .dropdown-content{display:block}}.algo-control-container{display:flex;flex-direction:row;gap:1rem}.algo-control{display:flex;flex-direction:column;gap:4px;position:relative}.algo-result{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;background:#161b22f2;border:1px solid #30363d;border-radius:6px;padding:4px 8px;font-size:.7rem;color:#8b949e;margin-top:4px;pointer-events:none;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media(max-width:768px){.divider{display:none}.algo-result{position:static;margin-top:0}.algo-control-container{flex-direction:column}.btn-outline{width:75%;display:flex;align-items:center;justify-content:center}}.algo-result.failure{border-color:#da363366}.error{color:#f85149;font-weight:600}.algo-result span{white-space:nowrap}.time-metrics{display:flex;flex-direction:column;margin-top:4px;padding-top:4px;border-top:1px solid rgba(48,54,61,.5);font-style:italic;font-size:.65rem;opacity:.8}.btn-outline{background:transparent;border-color:#30363d;color:#c9d1d9}.btn-outline:hover{background:#30363d;border-color:#8b949e}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;padding:1rem;background:#161b22;border-radius:12px;border:1px solid #30363d}@media(max-width:600px){.legend{gap:.5rem;font-size:.75rem}.legend-item{font-size:.75rem}}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#8b949e}.legend-item .node{width:15px;height:15px;outline:none}.main-content{flex:1;display:flex;flex-direction:column;padding:1rem;gap:1rem;overflow:hidden}@media(max-width:768px){.main-content{overflow:visible}}.grid-container{flex:1;display:flex;justify-content:center;align-items:center;background:#161b22;border-radius:12px;border:1px solid #30363d;overflow:auto;min-height:300px}