:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;background-color:#1a1a1a;color:#fff}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#2a2a2a;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}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.container{max-width:100%;margin:0 auto;padding:2rem;text-align:center}h1{color:#fff;margin-bottom:2rem;font-size:2.5rem;font-weight:700}.controls{display:flex;gap:1rem;justify-content:center;align-items:center;margin-bottom:2rem;flex-wrap:wrap}.palette-select,.size-select{background:#2a2a2a;color:#fff;border:1px solid #3a3a3a;padding:1rem 2rem;font-size:1.1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;min-width:200px}.size-select{min-width:150px}.palette-select:hover,.size-select:hover{border-color:#646cff}.palette-select:focus,.size-select:focus{outline:none;border-color:#646cff;box-shadow:0 0 0 2px #646cff4d}.palette{display:flex;gap:.5rem;margin-bottom:2rem;min-height:400px;border-radius:12px;overflow:visible;padding:0 1rem}.color-box{flex:1;position:relative;transition:all .3s ease;display:flex;align-items:flex-end;justify-content:center;padding:1rem;min-width:0;border-radius:8px}.color-box:hover{flex:1.2;z-index:1}.color-info{background:#1a1a1ae6;padding:.5rem 1rem;border-radius:8px;display:flex;gap:.5rem;align-items:center;box-shadow:0 2px 4px #0003;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap}.color-hex{font-family:monospace;font-size:1rem;color:#fff}.lock-button{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:.2rem;transition:transform .2s ease}.lock-button:hover{transform:scale(1.2)}.generate-button{background:#2a2a2a;color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0003}.generate-button:hover{background:#3a3a3a;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}