body{margin:0;min-height:100vh;transition:background-color .3s ease}.container{max-width:800px;margin:0 auto;padding:2rem;text-align:center;font-family:Arial,sans-serif}h1{color:#333;margin-bottom:2rem}.color-controls{display:flex;flex-direction:column;align-items:center;gap:1rem}#colorPicker{width:100px;height:100px;padding:0;border:none;border-radius:50%;cursor:pointer}#colorValue{font-family:monospace;font-size:1.2rem;color:#666}.palette{display:grid;grid-template-columns:repeat(5,40px);gap:.75rem;justify-content:center;margin-top:.5rem}.swatch{width:40px;height:40px;padding:0;border:2px solid #ddd;border-radius:8px;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.swatch:hover{transform:scale(1.06);border-color:#aaa}.swatch:focus-visible{box-shadow:0 0 0 3px #00000040}.swatch.selected{border-color:#333;box-shadow:0 0 0 3px #333}