body{background-color:#ffd6ba;margin:0;padding:20px;min-height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.four-colors-main{min-width:90%;margin:0 auto;padding:2rem;text-align:center;background-color:#ffdcdc;border:5px solid white;border-radius:15px;box-shadow:0 10px 30px #0000001a}.four-colors-main button{font-size:medium}.four-colors-title{color:#2c3e50;margin:0 0 1.5rem;font-size:2.2rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.four-colors-solved{color:#27ae60;margin:.5rem 0 1.5rem;font-size:1.5rem;font-weight:600;animation:four-colors-pulse 1.5s infinite}@keyframes four-colors-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}.four-colors-grid{display:inline-grid;margin:1.5rem auto;border:3px solid #34495e;border-radius:8px;overflow:hidden;background-color:#fff;box-shadow:0 5px 15px #0000001a}.four-colors-cell{border:1px solid #dfe6e9;transition:all .2s ease;position:relative}.four-colors-cell:hover{filter:brightness(.95)}.four-colors-palette{display:flex;justify-content:center;gap:1.2rem;margin:1.5rem auto;padding:1.2rem;background-color:#f8f9fa;border-radius:50px;box-shadow:inset 0 2px 5px #0000000d;max-width:350px}.four-colors-option{width:2.8rem;height:2.8rem;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s ease;box-shadow:0 3px 6px #0000001a}.four-colors-option:hover{transform:scale(1.1);box-shadow:0 5px 10px #00000026}.four-colors-red{background-color:#f12727}.four-colors-green{background-color:#51cf66}.four-colors-blue{background-color:#339af0}.four-colors-yellow{background-color:#ffd43b}.four-colors-controls{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.5rem}.four-colors-feature-btns{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}.four-colors-button{padding:.6rem 1.2rem;border:none;border-radius:50px;background-color:#4dabf7;color:#fff;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #0000001a;min-width:100px}.four-colors-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.four-colors-button:active{transform:translateY(0)}.four-colors-solution-btn{background-color:#40c057}.four-colors-solution-btn:hover{background-color:#37b24d}.four-colors-refresh-btn{background-color:#fd7e14}.four-colors-refresh-btn:hover{background-color:#f76707}.four-colors-form{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}.four-colors-input{padding:.6rem 1rem;border:2px solid #dee2e6;border-radius:50px;width:200px;max-width:100%;font-size:1rem;transition:all .2s ease;text-align:center}.four-colors-input:focus{outline:none;border-color:#4dabf7;box-shadow:0 0 0 3px #4dabf74d}@media (max-width: 768px){body{padding:15px}.grid-scroll-container{max-width:700px;overflow:auto}.four-colors-main{padding:1.5rem}.four-colors-title{font-size:1.8rem}.four-colors-grid{margin:1rem auto}.four-colors-palette{gap:1rem;padding:1rem}.four-colors-option{width:2.5rem;height:2.5rem}.four-colors-button{padding:.5rem 1rem;min-width:80px}.four-colors-input{width:160px}}@media (max-width: 480px){.four-colors-main{padding:1rem}.four-colors-title{font-size:1.5rem;margin-bottom:1rem}.grid-scroll-container{max-width:300px;overflow:auto}.four-colors-grid{margin:.8rem auto}.four-colors-palette{gap:.8rem;padding:.8rem;border-radius:30px}.four-colors-option{width:2.2rem;height:2.2rem}.four-colors-button{padding:.4rem .8rem;font-size:.9rem;min-width:70px}.four-colors-input{padding:.5rem .8rem;width:140px;font-size:.9rem}.four-colors-feature-btns{gap:.5rem}}@keyframes four-colors-cell-pop{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}.four-colors-cell{animation:four-colors-cell-pop .3s ease}