.color-palette{margin:20px 0}.palette-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:10px 0}.color-button{width:36px;height:36px;border:2px solid #ccc;border-radius:6px;cursor:pointer;font-size:10px;font-weight:700;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000,1px 0 0 #000;transition:all .2s;flex-shrink:0}.color-button:hover{transform:scale(1.1);border-color:#666}.color-button.selected{border-color:#000;border-width:3px;transform:scale(1.1)}.box{display:flex;flex-direction:column;align-items:center}.box-label{font-size:14px;font-weight:700;margin-bottom:5px;color:#666}.box-cells{display:flex;flex-direction:column;border:3px solid #333;border-radius:10px;background:#f0f0f0;padding:5px}.box-cell{width:40px;height:40px;margin:2px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;cursor:pointer;transition:all .2s}.box-cell:hover{transform:scale(1.1)}#root,.App,.puzzle-builder{padding:0;margin:0}.puzzle-builder{max-width:1200px;margin:0 auto}.main-layout{display:flex;gap:40px;height:100vh;align-items:flex-start}.puzzle-area{flex:2;min-width:0;position:sticky;top:0;display:flex;flex-direction:column;height:100vh}.puzzle-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}.puzzle-bottom{flex-shrink:0}.controls-area{flex:1;min-width:300px;overflow-y:auto;max-height:100vh}@media (max-width: 768px){.main-layout{flex-direction:column;gap:20px}.controls-area{min-width:0}}.boxes-container{display:flex;flex-direction:column;align-items:center;gap:20px;min-height:200px;max-width:800px;margin:20px auto}.box-row{display:flex;justify-content:center;gap:20px}.status{margin-top:20px;padding:15px;background:#f5f5f5;border-radius:8px}.status h3+*{min-height:24px}.color-count{display:inline-block;margin:5px 10px;padding:3px 8px;border-radius:4px;font-size:14px}.color-count.valid{background:#d4edda;color:#155724}.color-count.invalid{background:#f8d7da;color:#721c24}.color-count.placeholder{background:transparent;color:transparent;border:none}.puzzle-status{margin-top:15px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.color-counts-compact{display:flex;gap:8px;flex-wrap:wrap}.color-square{width:20px;height:20px;border-radius:3px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.color-square.valid{border:2px solid #28a745}.color-square.invalid{border:2px solid #dc3545}.color-square.placeholder{background:transparent;color:transparent;border:2px solid transparent}.validation-compact{font-size:12px;font-weight:700}.validation{margin:15px 0;font-size:16px;font-weight:700}.validation .valid{color:#28a745}.validation .invalid{color:#dc3545}.buttons{margin-top:10px}.main-buttons{display:flex;gap:10px;margin-bottom:10px}.animation-controls{display:flex;flex-direction:column;gap:10px}.play-controls{display:flex;gap:10px}.clear-button{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:14px}.clear-button:hover{background:#c82333}.solve-button{background:#28a745;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:14px}.solve-button:hover:not(:disabled){background:#218838}.solve-button:disabled{background:#6c757d;cursor:not-allowed}.solve-button.solving{background:#ffc107!important;color:#000!important;animation:pulse 1s infinite;border-color:#ffc107!important}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.solve-result{margin-top:20px;padding:15px;background:#d4edda;border:1px solid #c3e6cb;border-radius:8px}.solve-result h3{color:#155724;margin-top:0}.solve-result p,.moves h4{color:#155724}.moves-list{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.move{background:#007bff;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;font-family:monospace;transition:all .3s}.move.completed{background:#28a745}.move.current{background:#ffc107;color:#000;transform:scale(1.1)}.animation-controls{margin-top:15px;padding:15px;background:#f8f9fa;border-radius:8px}.speed-control{margin-bottom:10px}.speed-control label{display:block;margin-bottom:5px;font-size:14px}.speed-slider{width:200px}.play-controls{display:flex;gap:10px;margin-bottom:10px}.play-button,.stop-button,.reset-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.play-button{background:#28a745;color:#fff}.play-button:disabled{background:#6c757d;cursor:not-allowed}.stop-button{background:#dc3545;color:#fff}.stop-button:disabled{background:#6c757d;cursor:not-allowed}.reset-button{background:#6c757d;color:#fff}.progress{font-size:14px;font-weight:700;color:#495057}.final-state pre{background:#f8f9fa;padding:10px;border-radius:4px;font-size:12px;overflow-x:auto}.puzzle-json{margin:15px 0;padding:15px;background:#f8f9fa;border-radius:8px}.puzzle-json h4{margin-top:0;margin-bottom:10px;color:#333}.json-textarea{width:100%;font-family:monospace;font-size:12px;padding:8px;border:1px solid #ccc;border-radius:4px;resize:vertical;margin-bottom:10px}.load-button{background:#17a2b8;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px}.load-button:hover{background:#138496}.json-toggle{background:#6c757d;color:#fff;border:none;padding:4px 8px;border-radius:3px;cursor:pointer;font-size:12px;margin-bottom:10px}.json-toggle:hover{background:#5a6268}.solve-progress{margin-top:5px;font-size:11px;color:#666}.box-count-control{margin:15px 0}.box-count-control label{display:block;margin-bottom:5px;font-size:14px;font-weight:700;color:#333}.box-count-slider{width:200px}.speed-control label{display:block;margin-bottom:5px;font-size:14px;font-weight:700;color:#333}.speed-slider{width:150px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}button{background-color:#f9f9f9;color:#213547}}#root{max-width:1280px;margin:0 auto;padding:0;text-align:center}.App{padding:0}h1{font-size:3.2em;line-height:1.1;color:#646cff}.card{padding:2em;background:#f9f9f9;border-radius:8px;margin:2rem 0}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.read-the-docs{color:#888}