*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;min-height:100vh;padding:0;position:relative}body:before{background:radial-gradient(circle at 20% 50%,rgba(120,119,198,.1) 0,transparent 50%),radial-gradient(circle at 80% 80%,hsla(0,0%,100%,.15) 0,transparent 50%);content:"";height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:0}#root{min-height:100vh;position:relative;width:100%;z-index:1}.App{min-height:100vh}.App,.App--content{display:flex;flex-direction:column}.App--content{justify-content:space-between;min-height:calc(100vh - 60px);padding-top:60px}.App--container{display:flex;flex:1 1;flex-direction:column;overflow-x:auto;padding-bottom:20px}.nav{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.7);border-bottom:1px solid hsla(0,0%,100%,.3);box-shadow:0 2px 20px rgba(0,0,0,.05);gap:10px;height:60px;justify-content:space-between;padding:0 20px;position:fixed;width:100%;z-index:999}.nav,.nav--header{align-items:center;display:flex}.nav--header{gap:15px}.hamburger{background:transparent;border:none;cursor:pointer;display:none;flex-direction:column;height:30px;justify-content:space-around;padding:0;width:30px;z-index:1001}.hamburger span{background:#2d3748;border-radius:3px;height:3px;-webkit-transform-origin:center;transform-origin:center;transition:all .3s ease;width:100%}.nav.mobile-open .hamburger span:first-child{-webkit-transform:rotate(45deg) translate(8px,8px);transform:rotate(45deg) translate(8px,8px)}.nav.mobile-open .hamburger span:nth-child(2){opacity:0}.nav.mobile-open .hamburger span:nth-child(3){-webkit-transform:rotate(-45deg) translate(7px,-7px);transform:rotate(-45deg) translate(7px,-7px)}.nav--content{align-items:center;display:flex;flex:1 1;gap:10px;justify-content:flex-end}.nav h1{font-size:1.5rem;font-weight:600;letter-spacing:-.5px;margin:0}.nav button,.nav h1{color:#2d3748;white-space:nowrap}.nav button{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:hsla(0,0%,100%,.6);border:1px solid hsla(0,0%,100%,.5);border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:500;padding:8px 16px;transition:all .2s ease}.nav button:hover:not(.test){background:hsla(0,0%,100%,.8);border-color:hsla(0,0%,100%,.7);box-shadow:0 4px 12px rgba(0,0,0,.08);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.nav button:active:not(.test){-webkit-transform:translateY(0);transform:translateY(0)}.featured--algos,.speed--settings,.wall--patterns{display:block;position:relative}.featured--algos h3,.speed--settings h3,.wall--patterns h3{border-radius:8px;color:#2d3748;cursor:pointer;font-size:1rem;font-weight:500;line-height:60px;margin:0;padding:0 10px;transition:background .2s ease}.featured--algos h3:hover,.speed--settings h3:hover,.wall--patterns h3:hover{background:hsla(0,0%,100%,.5)}.algo--list,.patterns--list,.speeds--list{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.8);border:1px solid hsla(0,0%,100%,.5);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.1);display:none;left:0;list-style:none;margin-top:5px;min-width:150px;padding:8px 0;position:absolute;top:100%;z-index:1000}.algo--list.open,.patterns--list.open,.speeds--list.open{display:block}.algo--list li,.patterns--list li,.speeds--list li{margin:0}.algo--list button,.patterns--list button,.speeds--list button{background:transparent;border:none;border-radius:0;color:#2d3748;font-weight:400;padding:10px 16px;text-align:left;transition:background .2s ease;width:100%}.algo--list button:hover,.patterns--list button:hover,.speeds--list button:hover{background:hsla(0,0%,100%,.6);-webkit-transform:none;transform:none}.test{box-shadow:none;cursor:not-allowed;filter:alpha(opacity=50);opacity:.5;pointer-events:none}.description{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.6);border:1px solid hsla(0,0%,100%,.4);border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.06);display:flex;flex-shrink:0;flex-wrap:wrap;gap:20px;height:auto;justify-content:space-between;list-style:none;margin:20px auto;max-width:1200px;min-height:120px;padding:20px;position:relative;width:90%}.description--element{align-items:center;display:inline-flex;flex:1 1;gap:.75em;min-width:150px}.description--element h2{color:#4a5568;font-size:.95rem;font-weight:400;margin:0}.canvas,.display--element div{align-items:center;display:flex}.canvas{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.5);border:1px solid hsla(0,0%,100%,.4);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.06);flex-direction:column;margin:0 auto;max-width:1400px;padding:20px;position:relative;width:95%}.node{background-color:hsla(0,0%,100%,.9);border:1px solid rgba(0,0,0,.08);border-radius:2px;height:25px;transition:all .2s ease;width:25px}.node:hover{background-color:#fff;border-color:rgba(0,0,0,.15)}.start{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(76,175,80,.15);border:1.5px solid rgba(76,175,80,.4);border-radius:4px;box-shadow:0 2px 8px rgba(76,175,80,.2);cursor:-webkit-grab;cursor:grab;display:flex;height:25px;justify-content:center;position:relative;width:25px}.start:active{cursor:-webkit-grabbing;cursor:grabbing}.start:before{border-bottom:5px solid transparent;border-left:8px solid #4caf50;border-top:5px solid transparent;content:"";height:0;margin-left:2px;width:0}.end{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(244,67,54,.15);border:1.5px solid rgba(244,67,54,.4);border-radius:4px;box-shadow:0 2px 8px rgba(244,67,54,.2);cursor:-webkit-grab;cursor:grab;display:flex;height:25px;justify-content:center;position:relative;width:25px}.end:active{cursor:-webkit-grabbing;cursor:grabbing}.end:before{background:#f44336;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);content:"";height:10px;margin-top:-2px;width:10px}.visited{-webkit-animation:visitedAnimation .4s ease-out;animation:visitedAnimation .4s ease-out;background-color:rgba(100,181,246,.25);border:1px solid rgba(100,181,246,.3);border-radius:2px;height:25px;overflow:hidden;position:relative;transition:background-color .1s ease;width:25px;will-change:background-color,transform}.visited:before{-webkit-animation:fillFromCenter .4s ease-out forwards;animation:fillFromCenter .4s ease-out forwards;background-color:rgba(100,181,246,.4);border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0}@-webkit-keyframes fillFromCenter{0%{height:0;opacity:.8;width:0}to{height:35px;opacity:1;width:35px}}@keyframes fillFromCenter{0%{height:0;opacity:.8;width:0}to{height:35px;opacity:1;width:35px}}@-webkit-keyframes visitedAnimation{0%{background-color:rgba(100,181,246,0);-webkit-transform:scale(.3);transform:scale(.3)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}to{background-color:rgba(100,181,246,.25);-webkit-transform:scale(1);transform:scale(1)}}@keyframes visitedAnimation{0%{background-color:rgba(100,181,246,0);-webkit-transform:scale(.3);transform:scale(.3)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}to{background-color:rgba(100,181,246,.25);-webkit-transform:scale(1);transform:scale(1)}}.path{-webkit-animation:pathAnimation .4s ease-out;animation:pathAnimation .4s ease-out;background-color:rgba(255,213,79,.3);border:1px solid rgba(255,213,79,.4);border-radius:2px;height:25px;overflow:hidden;position:relative;transition:background-color .1s ease;width:25px;will-change:background-color,transform}.path:before{-webkit-animation:fillFromCenterPath .4s ease-out forwards;animation:fillFromCenterPath .4s ease-out forwards;background-color:rgba(255,213,79,.5);border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0}@-webkit-keyframes fillFromCenterPath{0%{height:0;opacity:.8;width:0}to{height:35px;opacity:1;width:35px}}@keyframes fillFromCenterPath{0%{height:0;opacity:.8;width:0}to{height:35px;opacity:1;width:35px}}@-webkit-keyframes pathAnimation{0%{background-color:rgba(255,213,79,0);-webkit-transform:scale(.3);transform:scale(.3)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}to{background-color:rgba(255,213,79,.3);-webkit-transform:scale(1);transform:scale(1)}}@keyframes pathAnimation{0%{background-color:rgba(255,213,79,0);-webkit-transform:scale(.3);transform:scale(.3)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}to{background-color:rgba(255,213,79,.3);-webkit-transform:scale(1);transform:scale(1)}}.wall{-webkit-animation:wallAnimation .2s ease-in;animation:wallAnimation .2s ease-in;background-color:rgba(0,0,0,.3);border:1px solid rgba(0,0,0,.2);border-radius:2px;height:25px;transition:background-color .1s ease;width:25px;will-change:transform}@-webkit-keyframes wallAnimation{0%{-webkit-transform:scale(.6);transform:scale(.6)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes wallAnimation{0%{-webkit-transform:scale(.6);transform:scale(.6)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.line{display:flex}@media (max-width:1024px){.nav{flex-wrap:wrap;height:auto;min-height:60px;padding:10px}.nav h1{font-size:1.3rem}.nav button{font-size:.85rem;padding:6px 12px}.featured--algos h3,.speed--settings h3,.wall--patterns h3{font-size:.9rem;line-height:40px;padding:0 8px}.description{gap:15px;padding:15px;width:95%}.description--element{min-width:120px}.description--element h2{font-size:.85rem}}@media (max-width:768px){body{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.nav{flex-direction:column;gap:0;height:auto;min-height:60px;padding:10px}.nav--header{width:100%}.hamburger{display:flex}.nav h1{font-size:1.2rem;line-height:1.2;margin:0}.nav--content{display:none;flex-direction:column;gap:8px;max-height:0;overflow:hidden;padding-top:10px;transition:max-height .3s ease,padding .3s ease;width:100%}.nav--content.open{display:flex;max-height:1000px;padding-top:10px}.nav--content>*{width:100%}.nav>button{flex:1 1;min-width:100px;width:auto}.featured--algos,.speed--settings,.wall--patterns{width:100%}.featured--algos h3,.speed--settings h3,.wall--patterns h3{background:hsla(0,0%,100%,.1);border-radius:6px;line-height:40px;text-align:center;width:100%}.algo--list,.patterns--list,.speeds--list{left:0;right:0;width:100%}.description{align-items:flex-start;flex-direction:column;gap:12px;padding:15px;width:95%}.description--element{justify-content:flex-start;min-width:0;min-width:auto;width:100%}.description--element h2{font-size:.9rem}.canvas{overflow-x:auto;padding:5px;width:98%}.end,.node,.path,.start,.visited,.wall{height:20px;width:20px}.start:before{border-bottom-width:4px;border-left-width:6px;border-top-width:4px}.end:before{height:8px;width:8px}.path:before,.visited:before{-webkit-animation:fillFromCenterMobile .4s ease-out forwards;animation:fillFromCenterMobile .4s ease-out forwards}@-webkit-keyframes fillFromCenterMobile{0%{height:0;opacity:.8;width:0}to{height:28px;opacity:1;width:28px}}@keyframes fillFromCenterMobile{0%{height:0;opacity:.8;width:0}to{height:28px;opacity:1;width:28px}}}@media (max-width:480px){.App--content{min-height:calc(100vh - 110px);padding-top:110px}.App--container{padding-top:0}.nav{min-height:110px}.nav h1{font-size:1.1rem}.nav button{font-size:.75rem;padding:6px 10px}.description{margin:15px auto;padding:12px}.description--element{gap:.5em}.description--element h2{font-size:.8rem}.canvas{padding:3px;width:100%}.end,.node,.path,.start,.visited,.wall{height:18px;width:18px}.start:before{border-bottom-width:3px;border-left-width:5px;border-top-width:3px}.end:before{height:7px;width:7px}.path:before,.visited:before{-webkit-animation:fillFromCenterSmallMobile .4s ease-out forwards;animation:fillFromCenterSmallMobile .4s ease-out forwards}@-webkit-keyframes fillFromCenterSmallMobile{0%{height:0;opacity:.8;width:0}to{height:25px;opacity:1;width:25px}}@keyframes fillFromCenterSmallMobile{0%{height:0;opacity:.8;width:0}to{height:25px;opacity:1;width:25px}}}@media (max-width:360px){.end,.node,.path,.start,.visited,.wall{height:15px;width:15px}.start:before{border-bottom-width:2.5px;border-left-width:4px;border-top-width:2.5px}.end:before{height:5px;width:5px}.path:before,.visited:before{-webkit-animation:fillFromCenterTinyMobile .4s ease-out forwards;animation:fillFromCenterTinyMobile .4s ease-out forwards}@-webkit-keyframes fillFromCenterTinyMobile{0%{height:0;opacity:.8;width:0}to{height:20px;opacity:1;width:20px}}@keyframes fillFromCenterTinyMobile{0%{height:0;opacity:.8;width:0}to{height:20px;opacity:1;width:20px}}}
/*# sourceMappingURL=main.72b160c1.css.map*/