body{margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f4f7f9;color:#333}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}button:focus,input:focus{outline:2px solid #4caf50}:root{--primary-color:#3498db;--secondary-color:#2ecc71;--accent-color:#f39c12;--text-primary:#2c3e50;--text-secondary:#7f8c8d;--bg-light:#f8f9fa;--bg-dark:#343a40;--border-color:#e0e0e0;--card-shadow:0 4px 12px rgba(0,0,0,.1)}.App{text-align:center;font-family:Roboto,Segoe UI,Arial,sans-serif;max-width:1400px;margin:0 auto;padding:20px;color:var(--text-primary)}.App-header{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.App-header h1{color:var(--text-primary);margin-bottom:20px;font-weight:600;font-size:2.2rem}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:20px;padding:15px;background-color:var(--bg-light);border-radius:8px;box-shadow:var(--card-shadow)}.difficulty-selector,.mode-selector{display:flex;align-items:center;gap:12px}.mode-selector label{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;cursor:pointer;transition:background-color .2s}.mode-selector label:hover{background-color:rgba(0,0,0,.05)}.difficulty-selector select{padding:8px 12px;border-radius:6px;border:1px solid var(--border-color);font-size:.95rem;background-color:#fff;outline:none;transition:border-color .2s}.difficulty-selector select:focus{border-color:var(--primary-color)}button{padding:10px 20px;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}button:hover{background-color:#2980b9;transform:translateY(-1px);box-shadow:0 4px 6px rgba(0,0,0,.1)}button:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.1)}button:disabled{background-color:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.App-main{display:flex;flex-direction:column;align-items:center}.split-screen-container{display:flex;gap:20px;width:100%;margin-bottom:30px}.left-panel,.right-panel{flex:1 1;border-radius:12px;background-color:#fff;box-shadow:var(--card-shadow);overflow:hidden}.panel-content{padding:20px;height:100%}.panel-title{margin:0 0 20px;color:var(--primary-color);font-size:1.5rem;text-align:center;font-weight:600;position:relative}.panel-title:after{content:"";position:absolute;bottom:-10px;left:25%;width:50%;height:3px;background-color:var(--primary-color);border-radius:2px}.message-container{background-color:var(--bg-light);border-radius:8px;padding:15px;width:100%;margin-top:20px;min-height:60px;display:flex;align-items:center;justify-content:center;border-left:4px solid var(--accent-color)}.message-container p{margin:0;color:var(--text-primary);font-weight:500}@media (max-width:992px){.split-screen-container{flex-direction:column}.left-panel,.right-panel{width:100%}.App{padding:10px}.controls{flex-direction:column;align-items:center}}.board{flex-direction:column;border:2px solid #333;width:min-content;margin:0 auto;box-shadow:0 4px 8px rgba(0,0,0,.1)}.board,.row{display:flex}.cell{width:50px;height:50px;text-align:center;font-size:24px;border:1px solid #ccc;background-color:#fff;cursor:pointer}.cell:nth-child(3n){border-right:2px solid #333}.row:nth-child(3n) .cell{border-bottom:2px solid #333}.cell:last-child{border-right:none}.row:last-child .cell{border-bottom:none}.cell.initial{background-color:#f0f0f0;font-weight:700;color:#333}.cell.filled{color:#4caf50}.cell.highlight{background-color:#ffeb3b}.cell.error{background-color:#ffcdd2}.cell{appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none}@media (max-width:500px){.cell{width:35px;height:35px;font-size:18px}}.visualizer{padding:1.5rem;background-color:#fff;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.1);height:100%;display:flex;flex-direction:column}.visualizer-header{margin-bottom:1.5rem;text-align:center}.visualizer-header h3{margin:0;color:#2c3e50;font-size:1.5rem;font-weight:600;position:relative;display:inline-block}.visualizer-header h3:after{content:"";position:absolute;bottom:-8px;left:10%;width:80%;height:3px;background-color:#3498db;border-radius:2px}.visualizer-content{display:flex;flex:1 1;gap:1.5rem}.visualizer-grid{flex:3 1;min-width:0}.visualizer-info{flex:2 1;display:flex;flex-direction:column;gap:1rem}.step-description{padding:1rem;background-color:#f8f9fa;border-radius:6px;border-left:4px solid #3498db;margin-bottom:1rem}.step-description p{font-size:.95rem;line-height:1.5;color:#4a4a4a}@media (max-width:768px){.visualizer-content{flex-direction:column}.visualizer-grid,.visualizer-info{flex:none}.visualizer-controls{flex-direction:column}}.instructions-panel{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:1.5rem;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.panel-header{margin:0 0 1rem;color:#2c3e50;font-size:1.5rem;font-weight:600;text-align:center;border-bottom:2px solid #e0e0e0;padding-bottom:.75rem}.instruction-section{margin-bottom:1.25rem}.instruction-section h4{margin:0 0 .5rem;color:#3498db;font-size:1.1rem;font-weight:500}.instruction-section p{margin:.5rem 0;line-height:1.5;color:#4a4a4a}.instruction-section ul{padding-left:1.5rem;margin:.5rem 0}.instruction-section li{margin-bottom:.5rem;line-height:1.4;color:#4a4a4a}.control-panel{width:100%;display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:12px;background:#f8f9fa;box-shadow:0 4px 12px rgba(0,0,0,.08);margin-top:20px;transition:all .3s ease}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:16px;gap:16px}.stat-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.stat-card-title{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;margin-bottom:8px}.stat-card-value{font-size:1.5rem;font-weight:500;color:#212529}.efficiency-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .2s ease,box-shadow .2s ease}.efficiency-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.efficiency-card-title{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;margin-bottom:8px;text-align:center}.efficiency-card-value{font-size:1.5rem;font-weight:500;color:#212529;text-align:center}.progress-container{width:100%;height:8px;background-color:#e9ecef;border-radius:4px;margin-top:8px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#3498db,#2980b9);border-radius:4px;transition:width .5s ease-out}.control-card{display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05)}.step-indicator{font-size:.9rem;font-weight:500;color:#495057;background-color:#e9ecef;padding:8px 12px;border-radius:6px;text-align:center}.playback-controls{gap:16px}.control-button,.playback-controls{display:flex;justify-content:center}.control-button{flex-direction:column;align-items:center;padding:12px 24px;border-radius:8px;min-width:90px}.control-button:hover:not(:disabled){transform:translateY(-2px)}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button i{font-size:1.2rem;margin-bottom:6px}.control-button span{font-size:.8rem}.next-button,.previous-button{background-color:#6c757d;color:#fff}.next-button:hover:not(:disabled),.previous-button:hover:not(:disabled){background-color:#5a6268}.speed-control{gap:16px;padding-top:8px;border-top:1px solid #e9ecef}.speed-label{font-size:.9rem;font-weight:500;color:#495057;white-space:nowrap}.speed-buttons{display:flex;flex:1 1;justify-content:space-between;gap:8px}.speed-button{flex:1 1;padding:8px;font-size:.8rem;text-align:center;border:1px solid #ced4da;border-radius:4px;background-color:#fff;color:#495057;cursor:pointer;transition:all .2s ease}.speed-button:hover:not(:disabled){background-color:#e9ecef}.speed-button.active{background-color:#3498db;color:#fff;border-color:#3498db}.speed-button:disabled{opacity:.5;cursor:not-allowed}.description-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .2s ease,box-shadow .2s ease}.description-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.description-card-title{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;margin-bottom:8px;text-align:center}.description-card-value{font-size:1.1rem;color:#212529;text-align:center;padding:8px;background-color:#f8f9fa;border-radius:4px}@media (max-width:768px){.stats-cards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.playback-controls{flex-wrap:wrap}.control-button{flex:1 1;min-width:70px;padding:10px 16px}.speed-control{flex-direction:column;align-items:flex-start}.speed-buttons{width:100%}}.statistics-panel{display:flex;flex-wrap:wrap;gap:1rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:1rem;margin-top:1rem}.stat-item{flex-basis:calc(33.333% - 1rem);min-width:120px}@media (max-width:768px){.stat-item{flex:1 1 100%}}.control-stats-panel{width:100%;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}.stats-section{flex:2 1;min-width:300px}.stats-group{display:flex;flex-wrap:wrap;gap:1rem}.stat-item{flex-grow:1;flex-shrink:1;flex-basis:calc(20% - 1rem);min-width:100px;display:flex;flex-direction:column;align-items:center;padding:.75rem;border-radius:6px;background-color:#f8f9fa;box-shadow:0 1px 3px rgba(0,0,0,.05)}.stat-label{font-size:.8rem;font-weight:600;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.stat-value{font-size:1.2rem;font-weight:500;color:#2c3e50}.progress-bar{width:100%;height:6px;background-color:#e9ecef;border-radius:3px;margin-top:.5rem;overflow:hidden}.progress-bar-fill{height:100%;background-color:#3498db;border-radius:3px;transition:width .3s ease}.controls-section{flex:3 1;min-width:300px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;gap:1rem;padding:.5rem 0}.step-counter{font-size:.9rem;font-weight:500;color:#6c757d;background-color:#f8f9fa;padding:.5rem 1rem;border-radius:6px;white-space:nowrap}.control-buttons{display:flex;gap:1rem}.control-button{padding:.5rem 1rem;background-color:#f8f9fa;color:#495057;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.control-button:hover:not(:disabled){background-color:#e9ecef}.play-button{background-color:#28a745;color:#fff}.play-button:hover:not(:disabled){background-color:#218838}.pause-button{background-color:#ffc107;color:#212529}.pause-button:hover:not(:disabled){background-color:#e0a800}.speed-control{display:flex;align-items:center;gap:.5rem}.speed-control label{font-size:.9rem;font-weight:500;color:#495057;white-space:nowrap}.speed-options{display:flex;gap:.25rem}.speed-option{padding:.4rem .5rem;font-size:.8rem;text-align:center;border:1px solid #ced4da;border-radius:4px;background-color:#fff;color:#495057;cursor:pointer;transition:all .2s ease;white-space:nowrap}.speed-option:hover:not(:disabled){background-color:#e9ecef}.speed-option.active{background-color:#3498db;color:#fff;border-color:#3498db}.visualizer-info{flex-basis:100%;text-align:center;padding:.5rem;background-color:#f0f0f0;border-radius:4px;margin-top:.5rem}.step-description p{margin:0;font-size:.9rem;color:#333}@media (max-width:992px){.control-stats-panel{flex-direction:column}.controls-section{flex-wrap:wrap}.stat-item{flex-grow:1;flex-shrink:1;flex-basis:calc(50% - 1rem)}}