*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}.main-container{display:flex;flex-direction:column;margin:0 auto;max-width:1200px;min-height:100vh;padding:1.5rem;padding:var(--spacing-lg)}.main-header{margin-bottom:3rem;margin-bottom:var(--spacing-2xl);padding:3rem 0;padding:var(--spacing-2xl) 0;text-align:center}.main-header h1{background:linear-gradient(135deg,#2563eb,#3b82f6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#0000;font-size:2.25rem;font-size:var(--text-4xl);font-weight:800;letter-spacing:-.025em;margin-bottom:1rem;margin-bottom:var(--spacing-md)}.main-header p{color:#64748b;color:var(--color-text-light);font-size:1.125rem;font-size:var(--text-lg);margin:0 auto;max-width:600px}.algorithm-grid{grid-gap:1.5rem;grid-gap:var(--spacing-lg);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:3rem;margin-bottom:var(--spacing-2xl)}.algorithm-card,.algorithm-grid{gap:1.5rem;gap:var(--spacing-lg)}.algorithm-card{align-items:flex-start;background:#fff;background:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:1rem;border-radius:var(--radius-xl);color:#0f172a;color:var(--color-text);display:flex;overflow:hidden;padding:2rem;padding:var(--spacing-xl);position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.algorithm-card:hover{border-color:#2563eb;border-color:var(--color-primary);box-shadow:0 10px 15px -3px #0000001a;box-shadow:var(--shadow-lg);transform:translateY(-4px)}.algorithm-card:hover .card-arrow{opacity:1;transform:translateX(4px)}.card-icon{align-items:center;background:linear-gradient(145deg,#fff,#f8fafc);background:var(--gradient-surface);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);display:flex;flex-shrink:0;font-size:1.875rem;font-size:var(--text-3xl);height:48px;justify-content:center;width:48px}.card-content{flex:1 1}.card-content h2{color:#0f172a;color:var(--color-text);font-size:1.25rem;font-size:var(--text-xl);font-weight:600;margin-bottom:.25rem;margin-bottom:var(--spacing-xs)}.card-content p{color:#64748b;color:var(--color-text-light);font-size:1rem;font-size:var(--text-base);line-height:1.5}.card-arrow{color:#2563eb;color:var(--color-primary);font-size:1.25rem;font-size:var(--text-xl);opacity:0;position:absolute;right:2rem;right:var(--spacing-xl);top:50%;transform:translateY(-50%);transition:all .3s ease}.main-footer{color:#64748b;color:var(--color-text-light);font-size:1rem;font-size:var(--text-base);margin-top:auto;padding:2rem 0;padding:var(--spacing-xl) 0;text-align:center}@media (prefers-color-scheme:dark){:root{--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-light:#94a3b8;--color-border:#334155}}@media (max-width:640px){.main-container{padding:1rem;padding:var(--spacing-md)}.main-header{padding:2rem 0;padding:var(--spacing-xl) 0}.main-header h1{font-size:1.875rem;font-size:var(--text-3xl)}.main-header p{font-size:1rem;font-size:var(--text-base);padding:0 1rem;padding:0 var(--spacing-md)}.algorithm-grid{gap:1rem;gap:var(--spacing-md)}.algorithm-card{padding:1.5rem;padding:var(--spacing-lg)}.card-icon{font-size:1.5rem;font-size:var(--text-2xl);height:40px;width:40px}.card-content h2{font-size:1.125rem;font-size:var(--text-lg)}.card-content p{font-size:.875rem;font-size:var(--text-sm)}}.algorithm-container{padding:1.5rem;padding-bottom:6rem;padding-bottom:calc(var(--spacing-2xl)*2)}.algorithm-header{margin:2rem 0;padding-top:2rem;padding-top:var(--spacing-xl)}.algorithm-header h1{background:linear-gradient(135deg,#2563eb,#3b82f6);margin-bottom:1rem}.algorithm-header p{color:#64748b;color:var(--color-text-light);font-size:1.125rem;margin:0 auto;max-width:600px}.back-button,.learn-button{align-items:center;background:#2563eb;background:var(--color-primary);border:none;border-radius:9999px;box-shadow:0 10px 15px -3px #0000001a;box-shadow:var(--shadow-lg);color:#fff;color:var(--color-white);cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;gap:var(--spacing-sm);padding:1rem 1.5rem;padding:var(--spacing-md) var(--spacing-lg);position:fixed;transition:all .3s ease;z-index:100}.back-button{left:var(--spacing-lg);top:var(--spacing-lg)}.learn-button{right:1.5rem;right:var(--spacing-lg);top:1.5rem;top:var(--spacing-lg)}.back-button:hover,.learn-button:hover{background:#1d4ed8;background:var(--color-primary-dark);transform:translateY(-1px)}.back-button:active,.learn-button:active{transform:translateY(0)}.algorithm-content{grid-gap:2rem;gap:2rem;grid-template-columns:1fr 2fr;margin-top:2rem}.input-section{border:1px solid #e2e8f0;border:1px solid var(--color-border);padding:1.5rem;padding:var(--spacing-lg)}.input-group{margin-bottom:1rem;margin-bottom:var(--spacing-md)}.input-field{border-radius:.5rem;flex:1 1;padding:.5rem 1rem;transition:all .3s ease}.input-field:focus{box-shadow:0 0 0 3px #2563eb1a}.btn{align-items:center;display:inline-flex;gap:.5rem;gap:var(--spacing-sm);justify-content:center;padding:1rem 1.5rem;padding:var(--spacing-md) var(--spacing-lg)}.btn:disabled{opacity:.7}.btn-primary{background:#2563eb;background:var(--color-primary)}.btn-primary:hover:not(:disabled){background:#1d4ed8;background:var(--color-primary-dark);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.visualization-section{border:1px solid #e2e8f0;border:1px solid var(--color-border);padding:1.5rem;padding:var(--spacing-lg)}.status-group{margin-bottom:1.5rem;margin-bottom:var(--spacing-lg)}.status-group h3{font-size:1.25rem}@media (max-width:768px){.algorithm-container{padding:.5rem;padding:var(--spacing-sm)}.algorithm-header{margin:1.5rem 0;margin:var(--spacing-lg) 0;padding-top:2rem;padding-top:var(--spacing-xl)}.algorithm-header h1{font-size:1.75rem}.algorithm-header h1,.algorithm-header p{padding:0 1rem;padding:0 var(--spacing-md)}.algorithm-header p{font-size:1rem}.algorithm-content{gap:1.5rem;gap:var(--spacing-lg);grid-template-columns:1fr}.back-button,.learn-button{align-items:center;bottom:1rem;bottom:var(--spacing-md);display:flex;font-size:.875rem;height:40px;justify-content:center;min-width:40px;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);position:fixed;top:auto}.back-button{left:1rem;left:var(--spacing-md)}.learn-button{right:1rem;right:var(--spacing-md)}.btn{font-size:.875rem;max-width:none;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);width:100%}@media (max-width:360px){.back-button span,.learn-button span{display:none}.back-button,.learn-button{padding:.25rem;padding:var(--spacing-xs);width:40px}}.input-group{flex-direction:column}.visualization-section{margin-bottom:6rem;margin-bottom:calc(var(--spacing-2xl)*2)}.status-items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow-x:auto;padding-bottom:.5rem;padding-bottom:var(--spacing-sm);scrollbar-width:none}.status-items::-webkit-scrollbar{display:none}.status-item{white-space:nowrap}}@media (prefers-color-scheme:dark){:root{--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-light:#94a3b8;--color-border:#334155}.input-field{background:#fff;background:var(--color-surface);color:#0f172a;color:var(--color-text)}.btn-primary{background:#2563eb;background:var(--color-primary)}.btn-primary:hover:not(:disabled){background:#1d4ed8;background:var(--color-primary-dark)}.back-button,.learn-button{background:#2563eb;background:var(--color-primary)}.back-button:hover,.learn-button:hover{background:#1d4ed8;background:var(--color-primary-dark)}}:root{--radius-xl:1rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-3xl:1.875rem;--text-4xl:2.25rem}.bfs-container{margin:0 auto;max-width:1200px;min-height:100vh;padding:1.5rem;padding:var(--spacing-lg);padding-top:5rem;padding-top:calc(var(--spacing-2xl) + var(--spacing-xl))}.bfs-header{margin-bottom:3rem;margin-bottom:var(--spacing-2xl);text-align:center}.bfs-header h1{background:linear-gradient(135deg,#2563eb,#3b82f6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#0000;font-size:2.25rem;font-size:var(--text-4xl);font-weight:800;margin-bottom:1rem;margin-bottom:var(--spacing-md)}.bfs-header p{color:#64748b;color:var(--color-text-light);font-size:1.125rem;font-size:var(--text-lg)}.bfs-content{grid-gap:2rem;grid-gap:var(--spacing-xl);display:grid;gap:2rem;gap:var(--spacing-xl);grid-template-columns:1fr 2fr}.input-section{background:#fff;border-radius:.75rem;display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-lg);padding:2rem}.input-group{gap:.5rem}.input-field,.node-select{border:2px solid #e2e8f0;border:2px solid var(--color-border);border-radius:.5rem;border-radius:var(--radius-md);flex:1 1;font-size:1rem;font-size:var(--text-base);padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);transition:all .3s ease}.input-field:focus,.node-select:focus{border-color:#2563eb;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f6;box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.btn{border-radius:.5rem;padding:.5rem 1.5rem;padding:var(--spacing-sm) var(--spacing-lg);transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#2563eb,#3b82f6)}.btn-primary:hover{box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:disabled{cursor:not-allowed;opacity:.6}.btn-secondary{background:#fff;color:#0f172a}.btn-secondary:hover{border-color:#2563eb;border-color:var(--color-primary);color:#2563eb;color:var(--color-primary)}.visualization-section{background:#fff;background:var(--color-surface);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);padding:2rem;padding:var(--spacing-xl)}.graph-display{margin-bottom:2rem;margin-bottom:var(--spacing-xl)}.graph-display h3{color:#0f172a;color:var(--color-text);font-size:1.25rem;font-size:var(--text-xl);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.node-info{align-items:center;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--color-border);display:flex;gap:1rem;gap:var(--spacing-md);padding:.5rem;padding:var(--spacing-sm)}.node-name{color:#2563eb;color:var(--color-primary);font-weight:600}.node-neighbors{color:#64748b;color:var(--color-text-light)}.bfs-status{grid-gap:2rem;grid-gap:var(--spacing-xl);display:grid;gap:2rem;gap:var(--spacing-xl)}.status-group h3{color:#0f172a;color:var(--color-text);font-size:1.125rem;font-size:var(--text-lg);margin-bottom:1rem;margin-bottom:var(--spacing-md)}.status-items{display:flex;flex-wrap:wrap;gap:.5rem;gap:var(--spacing-sm)}.status-item{border-radius:.375rem;border-radius:var(--radius-sm);font-size:.875rem;font-size:var(--text-sm);font-weight:500;padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm)}.status-item.visited{background:#059669;background:var(--color-success);color:#fff;color:var(--color-white)}.status-item.queue{background:#f59e0b;background:var(--color-warning);color:#fff;color:var(--color-white)}.status-item.result{background:#2563eb;background:var(--color-primary);color:#fff;color:var(--color-white)}.learn-button{align-items:center;background:#fff;background:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:9999px;box-shadow:0 2px 4px #0000001a;color:#0f172a;color:var(--color-text);cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;gap:var(--spacing-sm);padding:.5rem 1.5rem;padding:var(--spacing-sm) var(--spacing-lg);position:fixed;right:1rem;right:var(--spacing-md);top:1rem;top:var(--spacing-md);transition:all .3s ease;z-index:10}.learn-button:hover{background:#2563eb;background:var(--color-primary);box-shadow:0 4px 6px #0000001a;transform:translateY(-1px)}.learn-button:hover,.status-item{color:#fff;color:var(--color-white)}.status-item{background:#3b82f6;background:var(--color-primary-light)}.graph-node{align-items:center;background:#fff;background:var(--color-surface);border:2px solid #2563eb;border:2px solid var(--color-primary);border-radius:50%;display:flex;font-weight:600;height:40px;justify-content:center;transition:all .3s ease;width:40px}.graph-node.visited{background:#059669;background:var(--color-success);border-color:#059669;border-color:var(--color-success);color:#fff;color:var(--color-white)}.graph-node.current{background:#2563eb;background:var(--color-primary);border-color:#2563eb;border-color:var(--color-primary);color:#fff;color:var(--color-white);transform:scale(1.1)}.graph-edge{background:#e2e8f0;background:var(--color-border);height:2px;position:absolute;transform-origin:left center;transition:all .3s ease}.graph-edge.visited{background:#059669;background:var(--color-success)}@media (max-width:768px){.bfs-content{grid-template-columns:1fr}.back-button{left:1rem;left:var(--spacing-md);transform:none}.back-button,.learn-button{background:#2563eb;background:var(--color-primary);bottom:1rem;bottom:var(--spacing-md);box-shadow:0 4px 6px #0000001a;color:#fff;color:var(--color-white);padding:.5rem 1.5rem;padding:var(--spacing-sm) var(--spacing-lg);position:fixed}.learn-button{right:1rem;right:var(--spacing-md);top:auto}.back-button:hover,.learn-button:hover{background:#1d4ed8;background:var(--color-primary-dark);transform:translateY(-1px)}.visualization-section{margin-bottom:6rem;margin-bottom:calc(var(--spacing-xl)*3)}.bfs-header h1{font-size:1.875rem;font-size:var(--text-3xl)}.input-group{flex-direction:column}.btn{width:100%}}@media (prefers-color-scheme:dark){:root{--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-light:#94a3b8;--color-border:#334155}.btn-secondary,.input-field,.node-select{background:#fff;background:var(--color-surface);color:#0f172a;color:var(--color-text)}}:root{--color-primary-light:#3b82f6;--color-primary-dark:#1d4ed8;--color-secondary:#64748b;--color-danger:#dc2626;--color-warning:#f59e0b;--color-background:#f8fafc;--color-surface:#fff;--color-text:#0f172a;--gradient-primary:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);--gradient-surface:linear-gradient(145deg,var(--color-surface) 0%,#f8fafc 100%);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-full:9999px}body{background-color:#f8fafc;background-color:var(--color-background);color:#0f172a;color:var(--color-text);font-family:Inter,Arial,sans-serif}.container{background-color:#fff;background-color:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);margin:1.5rem auto;margin:var(--spacing-lg) auto;max-height:800px;max-width:200%;overflow-y:auto;padding:90px}.container,button{border-radius:.5rem;border-radius:var(--radius-md)}button{background-color:#2563eb;background-color:var(--color-primary);color:var(--color-white);font-weight:500;letter-spacing:.5px;margin:5px;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);text-transform:uppercase;transition:all var(--transition-speed) ease}button:hover{background-color:#1d4ed8;background-color:var(--color-primary-dark);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}button:active{transform:translateY(0)}.dijkstra-container{margin:0 auto;max-width:1200px;padding:1.5rem;padding:var(--spacing-lg);padding-top:calc(var(--header-height) + var(--spacing-xl));position:relative}.back-button{background:#fff;border-radius:9999px;color:#0f172a;gap:.5rem;left:1rem;padding:.5rem 1.5rem;top:1rem}.back-button:focus{box-shadow:0 0 0 3px #3b82f6}@media (max-width:640px){.back-button{background:linear-gradient(135deg,#2563eb,#3b82f6);background:var(--gradient-primary);border:none;bottom:1.5rem;bottom:var(--spacing-lg);box-shadow:0 10px 15px -3px #0000001a;box-shadow:var(--shadow-lg);color:#fff;color:var(--color-white);font-size:var(--text-base);left:50%;padding:.5rem 2rem;padding:var(--spacing-sm) var(--spacing-xl);top:auto;transform:translateX(-50%)}.back-button:hover{background:#1d4ed8;background:var(--color-primary-dark);box-shadow:0 8px 20px #2563eb4d;transform:translateX(-50%)}.back-button:active{box-shadow:0 4px 12px #2563eb33;transform:translateX(-50%) translateY(1px)}}.dijkstra-header{margin-bottom:3rem;margin-bottom:var(--spacing-2xl);padding-top:2rem;padding-top:var(--spacing-xl);text-align:center}.dijkstra-header h1{background:linear-gradient(135deg,#2563eb,#3b82f6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#0000;font-size:2.5rem;margin-bottom:1rem;margin-bottom:var(--spacing-md)}.dijkstra-header p{color:#64748b;color:var(--color-text-light);font-size:var(--text-lg)}.dijkstra-grid{display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-lg);margin:1.5rem 0;margin:var(--spacing-lg) 0}.graph-section{background-color:#fff;background-color:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:.5rem;border-radius:var(--radius-md);padding:1rem;padding:var(--spacing-md);transition:transform var(--transition-speed) ease}.graph-section:hover{box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.graph-section h2{color:#0f172a;color:var(--color-text);font-size:1.5rem;margin:0 0 1rem;margin:0 0 var(--spacing-md) 0}.scroll-container{max-height:150px;overflow-x:auto;overflow-y:hidden;padding:1rem 0;padding:var(--spacing-md) 0;scrollbar-color:#2563eb #fff;scrollbar-color:var(--color-primary) var(--color-surface);scrollbar-width:thin}.edge-list,.node-list{display:flex;flex-wrap:nowrap;gap:1rem;gap:var(--spacing-md);list-style:none;margin:0;min-width:-webkit-min-content;min-width:min-content;padding:0}.edge-item,.node-item{align-items:center;background-color:#fff;background-color:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:1rem;gap:var(--spacing-md);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:1rem;padding:var(--spacing-md);transition:all var(--transition-speed) ease;white-space:nowrap}.edge-item:hover,.node-item:hover{background-color:#f8fafc;background-color:var(--color-background);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.edge-weight{background-color:#e9ecef;border-radius:12px;font-size:.9em;font-weight:500;padding:2px 8px}.start-node-section{background-color:#fff;background-color:var(--color-surface);border-radius:.5rem;border-radius:var(--radius-md);margin:1.5rem 0;margin:var(--spacing-lg) 0;padding:1rem;padding:var(--spacing-md);text-align:center}.start-node-input,.start-node-section{transition:all var(--transition-speed) ease}.start-node-input{border:2px solid #e2e8f0;border:2px solid var(--color-border);border-radius:.5rem;border-radius:var(--radius-md);font-size:1rem;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);width:200px}.start-node-input:focus{border-color:#2563eb;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f6;box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.result-section{background-color:#fff;background-color:var(--color-surface);border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);margin-top:1.5rem;margin-top:var(--spacing-lg);padding:1.5rem;padding:var(--spacing-lg)}.result-section h2{color:#0f172a;color:var(--color-text);font-size:1.8rem;margin-bottom:1.5rem;margin-bottom:var(--spacing-lg);text-align:center}.result-list{gap:1rem;gap:var(--spacing-md);list-style:none;padding:0}.result-item,.result-list{display:flex;flex-direction:column}.result-item{background-color:#fff;background-color:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:.5rem;border-radius:var(--radius-md);gap:.5rem;gap:var(--spacing-sm);padding:1rem;padding:var(--spacing-md);transition:all var(--transition-speed) ease}.result-item:hover{box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.result-distance{align-items:center;color:#0f172a;color:var(--color-text);display:flex;font-weight:700;justify-content:space-between}.result-distance:after{background-color:#e9ecef;border-radius:12px;content:attr(data-distance);font-size:.9em;padding:2px 8px}.result-path{color:#64748b;color:var(--color-text-light);font-size:.9em}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#fff;background:var(--color-surface);border-radius:4px}::-webkit-scrollbar-thumb{background:#2563eb;background:var(--color-primary);border-radius:4px;-webkit-transition:background var(--transition-speed) ease;transition:background var(--transition-speed) ease}::-webkit-scrollbar-thumb:hover{background:#1d4ed8;background:var(--color-primary-dark)}@media screen and (max-width:768px){.container{padding:1rem;padding:var(--spacing-md)}.dijkstra-header h1{font-size:2rem}.start-node-input{max-width:300px;width:100%}}@media screen and (max-width:480px){.dijkstra-header h1{font-size:1.5rem}.edge-item,.graph-section,.node-item{padding:.5rem;padding:var(--spacing-sm)}}@media (prefers-color-scheme:dark){:root{--color-background:#0f172a;--color-surface:#1e293b;--color-text:#f8fafc;--color-text-light:#94a3b8;--color-border:#334155}.back-button{background:#fff;background:var(--color-surface);border-color:#e2e8f0;border-color:var(--color-border)}}:root{--primary:#2563eb;--primary-light:#3b82f6;--primary-dark:#1d4ed8;--success:#059669;--danger:#dc2626;--warning:#d97706;--background:#f8fafc;--text:#1e293b;--text-light:#64748b;--border:#e2e8f0;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--radius:8px;--spacing-lg:2rem;--spacing-md:1.5rem;--spacing-sm:1rem;--spacing-xs:0.5rem;--spacing-2xl:3rem;--spacing-xl:2.5rem;--container-width:1200px;--text-3xl:2.5rem;--text-2xl:1.5rem;--text-lg:1.1rem;--text-base:1rem;--text-sm:0.95rem;--leading-relaxed:1.6;--radius-lg:12px;--radius-md:8px;--color-text:#1e293b;--color-text-light:#64748b;--color-white:#fff;--color-surface:#f8fafc;--color-border:#e2e8f0;--color-primary:#2563eb;--color-success:#059669;--gradient-primary:linear-gradient(90deg,#2563eb,#3b82f6);--gradient-surface:linear-gradient(90deg,#f8fafc,#fff);--transition-fast:0.2s;--transition-normal:0.3s;--z-elevate:1;--header-height:60px;--z-sticky:1000;--radius-full:50%;--shadow-lg:0 10px 15px -3px #0000001a}.greedy-container{background:#f8fafc;background:var(--background);margin:0 auto;max-width:1200px;max-width:var(--container-width);min-height:100vh;padding:2rem;padding:var(--spacing-lg);padding-top:calc(60px + 2.5rem);padding-top:calc(var(--header-height) + var(--spacing-xl))}.greedy-header{margin-bottom:3rem;margin-bottom:var(--spacing-2xl);text-align:center}.greedy-title{background:linear-gradient(90deg,#2563eb,#3b82f6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#0000;font-size:2.5rem;font-size:var(--text-3xl);margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.greedy-description{color:#64748b;color:var(--text-light);font-size:1.1rem;font-size:var(--text-lg);line-height:1.6;line-height:var(--leading-relaxed);margin:0 auto;max-width:800px}.input-section{background:#f8fafc;background:var(--color-surface);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);margin-bottom:3rem;margin-bottom:var(--spacing-2xl);padding:2.5rem;padding:var(--spacing-xl)}.input-grid{grid-gap:2rem;grid-gap:var(--spacing-lg);display:grid;gap:2rem;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2rem;margin-bottom:var(--spacing-lg)}.input-group{display:flex;flex-direction:column;gap:1rem;gap:var(--spacing-sm)}.input-label{font-size:.95rem;font-size:var(--text-sm);font-weight:600}.input-field,.input-label{color:#1e293b;color:var(--color-text)}.input-field{background:#f8fafc;background:var(--color-surface);border:2px solid #e2e8f0;border:2px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);font-size:1rem;font-size:var(--text-base);padding:1rem 1.5rem;padding:var(--spacing-sm) var(--spacing-md);transition:border-color .2s;transition:border-color var(--transition-fast)}.input-field:focus{border-color:#2563eb;border-color:var(--color-primary);outline:none}.input-field::placeholder{color:#64748b;color:var(--color-text-light)}.button-group{display:flex;flex-wrap:wrap;gap:1.5rem;gap:var(--spacing-md);justify-content:flex-end}.btn{border:none;border-radius:8px;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-size:var(--text-base);font-weight:600;padding:1rem 2.5rem;padding:var(--spacing-sm) var(--spacing-xl);transition:all .2s;transition:all var(--transition-fast)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:linear-gradient(90deg,#2563eb,#3b82f6);background:var(--gradient-primary);color:#fff;color:var(--color-white)}.btn-primary:hover:not(:disabled){box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-secondary{background:#f8fafc;background:var(--color-surface);border:2px solid #e2e8f0;border:2px solid var(--color-border);color:#1e293b;color:var(--color-text)}.btn-secondary:hover:not(:disabled){border-color:#2563eb;border-color:var(--color-primary);color:#2563eb;color:var(--color-primary)}.back-button{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#f8fafc;background:var(--color-surface);border:2px solid #e2e8f0;border:2px solid var(--color-border);border-radius:50%;border-radius:var(--radius-full);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);color:#1e293b;color:var(--color-text);cursor:pointer;display:flex;font-size:1rem;font-size:var(--text-base);font-weight:600;gap:1rem;gap:var(--spacing-sm);left:1.5rem;left:var(--spacing-md);padding:1rem 2rem;padding:var(--spacing-sm) var(--spacing-lg);position:fixed;top:1.5rem;top:var(--spacing-md);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000;z-index:var(--z-sticky)}.back-button:hover{background:#2563eb;background:var(--color-primary);border-color:#2563eb;border-color:var(--color-primary);box-shadow:0 10px 15px -3px #0000001a;box-shadow:var(--shadow-lg);color:#fff;color:var(--color-white)}.back-button:active{box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(1px)}.back-button:focus{box-shadow:0 0 0 3px var(--color-primary-light);outline:none}@media (max-width:640px){.greedy-container{padding:1.5rem;padding:var(--spacing-md);padding-bottom:calc(3rem + 60px);padding-bottom:calc(var(--spacing-2xl) + var(--header-height))}.greedy-title{font-size:1.5rem;font-size:var(--text-2xl)}.greedy-description{font-size:1rem;font-size:var(--text-base)}.input-section,.results-section{padding:2rem;padding:var(--spacing-lg)}.input-grid{gap:1.5rem;gap:var(--spacing-md);grid-template-columns:1fr}.button-group{flex-direction:column;width:100%}.btn{text-align:center;width:100%}.results-grid{grid-template-columns:1fr}.item-card{align-items:flex-start;flex-direction:column;gap:1rem;gap:var(--spacing-sm)}.item-amount{align-self:flex-end}.back-button{background:linear-gradient(90deg,#2563eb,#3b82f6);background:var(--gradient-primary);border:none;bottom:2rem;bottom:var(--spacing-lg);box-shadow:0 10px 15px -3px #0000001a;box-shadow:var(--shadow-lg);color:#fff;color:var(--color-white);font-size:1rem;font-size:var(--text-base);left:50%;padding:1rem 2.5rem;padding:var(--spacing-sm) var(--spacing-xl);top:auto;transform:translateX(-50%)}.back-button:hover{background:var(--color-primary-dark);box-shadow:0 8px 20px #2563eb4d;transform:translateX(-50%)}.back-button:active{box-shadow:0 4px 12px #2563eb33;transform:translateX(-50%) translateY(1px)}}@media (min-width:641px) and (max-width:1024px){.greedy-container{padding:2rem;padding:var(--spacing-lg)}.input-grid,.results-grid{grid-template-columns:repeat(2,1fr)}}@media (prefers-color-scheme:dark){.input-field{border-color:#e2e8f0;border-color:var(--color-border)}.btn-secondary,.input-field,.result-card{background:#f8fafc;background:var(--color-surface)}}.results-section{animation:fadeIn .3s;animation:fadeIn var(--transition-normal);background:#f8fafc;background:var(--color-surface);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);margin-bottom:2.5rem;margin-bottom:var(--spacing-xl);padding:2.5rem;padding:var(--spacing-xl)}.results-title{color:#1e293b;color:var(--color-text);font-size:1.5rem;font-size:var(--text-2xl);margin-bottom:2rem;margin-bottom:var(--spacing-lg)}.results-grid{grid-gap:2rem;grid-gap:var(--spacing-lg);display:grid;gap:2rem;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2.5rem;margin-bottom:var(--spacing-xl)}.result-card{background:linear-gradient(90deg,#f8fafc,#fff);background:var(--gradient-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);padding:2rem;padding:var(--spacing-lg)}.result-header{align-items:baseline;display:flex;justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-sm)}.result-title{color:#64748b;color:var(--color-text-light);font-size:.95rem;font-size:var(--text-sm)}.result-value{color:#2563eb;color:var(--color-primary);font-size:1.5rem;font-size:var(--text-2xl);font-weight:600}.result-details{color:#64748b;color:var(--color-text-light);font-size:.95rem;font-size:var(--text-sm);line-height:1.6;line-height:var(--leading-relaxed)}.items-list{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md)}.item-card{align-items:center;background:#f8fafc;background:var(--color-surface);border:1px solid #e2e8f0;border:1px solid var(--color-border);border-radius:8px;border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:1.5rem;padding:var(--spacing-md);transition:transform .2s;transition:transform var(--transition-fast)}.item-card:hover{transform:translateX(4px)}.item-info{display:flex;flex-direction:column;gap:.5rem;gap:var(--spacing-xs)}.item-name{color:#1e293b;color:var(--color-text);font-size:1rem;font-size:var(--text-base)}.item-ratio{color:#64748b;color:var(--color-text-light);font-size:.95rem;font-size:var(--text-sm)}.item-amount{color:#059669;color:var(--color-success);font-size:1.1rem;font-size:var(--text-lg);font-weight:600}.algorithm-container{margin:0 auto;max-width:1200px;min-height:100vh;padding:var(--spacing-lg)}.algorithm-header{margin:var(--spacing-xl) 0;text-align:center}.algorithm-header h1{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);-webkit-background-clip:text;background-clip:text;color:#0000;font-size:2.5rem;font-weight:800;margin-bottom:var(--spacing-md)}.algorithm-content{grid-gap:var(--spacing-xl);display:grid;gap:var(--spacing-xl);grid-template-columns:1fr;margin-top:var(--spacing-xl)}.visualization-section{grid-gap:var(--spacing-xl);display:grid;gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.matrix-container{background:var(--color-surface);border-radius:.75rem;box-shadow:var(--shadow-md);padding:var(--spacing-lg)}.matrix-wrapper{align-items:center;background:var(--color-background);border-radius:.5rem;flex-direction:column;max-width:100%;overflow-x:auto;padding:var(--spacing-md)}.matrix-row,.matrix-wrapper{display:flex;gap:var(--spacing-sm)}.matrix-row{margin-bottom:var(--spacing-sm)}.matrix-cell{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:.375rem;display:flex;font-family:monospace;font-size:1.125rem;font-weight:600;height:48px;justify-content:center;transition:all .3s ease;width:48px}.matrix-cell.current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);transform:scale(1.1);z-index:1}.matrix-cell.intermediate{background:var(--color-primary-light);border-color:var(--color-primary-light);color:var(--color-white)}.steps-container{background:var(--color-surface);border-radius:.75rem;box-shadow:var(--shadow-md);padding:var(--spacing-lg)}.steps-list{background:var(--color-background);border-radius:.5rem;max-height:300px;overflow-y:auto;padding:var(--spacing-md)}.step-item{animation:fadeIn .3s ease;border-radius:.375rem;font-size:.875rem;margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.step-item.update{background:var(--color-success);color:var(--color-white)}.step-item.skip{background:var(--color-text-light);color:var(--color-white)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.algorithm-container{padding:var(--spacing-sm);padding-bottom:calc(var(--spacing-2xl)*3)}.algorithm-header{margin:var(--spacing-lg) 0}.algorithm-header h1{font-size:1.75rem}.visualization-section{gap:var(--spacing-lg);grid-template-columns:1fr}.matrix-container,.steps-container{margin-bottom:var(--spacing-md);padding:var(--spacing-md)}.matrix-wrapper{padding:var(--spacing-sm)}.matrix-cell{font-size:.875rem;height:36px;width:36px}.steps-list{max-height:200px}.step-item{font-size:.75rem;padding:var(--spacing-xs) var(--spacing-sm)}.back-button,.learn-button{background:var(--color-primary);border-radius:9999px;bottom:var(--spacing-md);box-shadow:var(--shadow-lg);color:var(--color-white);padding:var(--spacing-md) var(--spacing-lg);position:fixed;top:auto;z-index:100}.back-button{left:var(--spacing-md)}.learn-button{right:var(--spacing-md)}.control-section{background:var(--color-background);border-bottom:1px solid var(--color-border);margin:0 calc(var(--spacing-sm)*-1);margin-bottom:var(--spacing-lg);padding:var(--spacing-sm);position:-webkit-sticky;position:sticky;top:0;z-index:90}.control-section button{padding:var(--spacing-md);width:100%}}@media (prefers-color-scheme:dark){.matrix-wrapper,.steps-list{background:var(--color-surface)}.control-section,.matrix-cell{background:var(--color-background)}.control-section{border-color:var(--color-border)}}.pattern-match{background:var(--color-success);border-radius:.375rem;color:var(--color-white);padding:var(--spacing-xs) var(--spacing-sm)}.text-display{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;font-family:monospace;font-size:1.125rem;line-height:1.5;margin:var(--spacing-md) 0;overflow-x:auto;padding:var(--spacing-md);white-space:pre-wrap}.highlight{background:var(--color-primary-light);border-radius:.25rem;color:var(--color-white);padding:.125rem .25rem}@media (max-width:768px){.text-display{font-size:.875rem;padding:var(--spacing-sm)}}.learn-container{margin:0 auto;max-width:1200px;min-height:100vh;padding:var(--spacing-lg);padding-bottom:calc(var(--spacing-2xl)*2)}.learn-header{margin:var(--spacing-xl) 0;padding-top:var(--spacing-xl);text-align:center}.learn-header h1{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);-webkit-background-clip:text;background-clip:text;color:#0000;font-size:2.5rem;font-weight:800;margin-bottom:var(--spacing-md);padding:0 var(--spacing-md)}.learn-content{margin:0 auto;max-width:800px;padding:0 var(--spacing-md)}.learn-section{background:var(--color-surface);border-radius:.75rem;box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl);padding:var(--spacing-xl)}.learn-section h2{color:var(--color-primary);font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-lg)}.learn-section p{color:var(--color-text);font-size:1.125rem;line-height:1.7}.learn-list,.learn-section p{margin-bottom:var(--spacing-lg)}.learn-list{padding-left:var(--spacing-xl)}.learn-list li{color:var(--color-text);font-size:1.125rem;line-height:1.7}.learn-list li,.learn-list ul{margin-bottom:var(--spacing-md)}.learn-list ul{margin-top:var(--spacing-sm)}.learn-list ul li{color:var(--color-text-light);font-size:1rem;margin-bottom:var(--spacing-sm)}.code-block{background:var(--color-background);border-radius:.5rem;font-family:monospace;font-size:.875rem;line-height:1.5;margin:var(--spacing-lg) 0;overflow-x:auto;padding:var(--spacing-lg)}@media (max-width:768px){.learn-container{padding:var(--spacing-sm)}.learn-header{margin:var(--spacing-lg) 0;padding-top:var(--spacing-lg)}.learn-header h1{font-size:1.75rem;margin-bottom:var(--spacing-sm);padding:0 var(--spacing-sm)}.learn-content{padding:0}.learn-section{border-radius:.5rem;margin-bottom:var(--spacing-lg);padding:var(--spacing-lg)}.learn-section h2{font-size:1.25rem;margin-bottom:var(--spacing-md)}.learn-section p{font-size:1rem;line-height:1.6;margin-bottom:var(--spacing-md)}.learn-list{padding-left:var(--spacing-lg)}.learn-list li{font-size:1rem;line-height:1.6;margin-bottom:var(--spacing-sm)}.learn-list ul li{font-size:.875rem}.code-block{font-size:.75rem;margin:var(--spacing-md) 0;padding:var(--spacing-md);white-space:pre-wrap;word-break:break-word}.back-button,.learn-button{background:var(--color-primary);bottom:var(--spacing-md);box-shadow:var(--shadow-lg);color:var(--color-white);padding:var(--spacing-md) var(--spacing-lg);position:fixed;top:auto;z-index:100}.back-button{left:var(--spacing-md)}.learn-button{right:var(--spacing-md)}.learn-container{padding-bottom:calc(var(--spacing-2xl)*3)}}@media (prefers-color-scheme:dark){.learn-section{background:var(--color-surface)}.code-block{background:var(--color-background);border:1px solid var(--color-border)}.learn-section h2{color:var(--color-primary-light)}}:root{--primary-color:#2a6ef5;--secondary-color:#6c63ff;--background-color:#f8f9fa;--text-color:#2c3e50;--hover-color:#1a56d6;--card-bg:#fff;--shadow:0 4px 6px #0000001a}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f9fa;background-color:var(--background-color);color:#2c3e50;color:var(--text-color);font-family:Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;margin:0;padding:0}.App{min-height:100vh;padding:2rem;text-align:center}.container{margin:0 auto;max-width:1200px;padding:0 1rem}button{background-color:#2a6ef5;background-color:var(--primary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;padding:.8rem 1.5rem;transition:background-color .3s ease}button:hover{background-color:#1a56d6;background-color:var(--hover-color)}.card{background:#fff;background:var(--card-bg);border-radius:12px;box-shadow:0 4px 6px #0000001a;box-shadow:var(--shadow);margin:1rem 0;padding:1.5rem;transition:transform .3s ease}.card:hover{transform:translateY(-5px)}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.525c64d3.css.map*/