*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,system-ui,sans-serif}.app{background:#0a0a0f;flex-direction:column;min-height:100vh;display:flex}header{color:#fff;background:#16161d;flex-wrap:wrap;align-items:center;gap:24px;padding:24px 32px;display:flex;position:relative}h1{font-size:22px;font-weight:700}.controls{gap:12px;margin-left:auto;display:flex}.controls button{color:#fff;cursor:pointer;background:#4f46e5;border:0;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600}.controls button:hover{background:#6d63ec}.toast{color:#fff;background:#16a34a;border-radius:8px;padding:10px 16px;font-size:14px;animation:1.5s fade;position:absolute;top:72px;right:32px}@keyframes fade{0%{opacity:0;transform:translateY(-8px)}20%{opacity:1;transform:translateY(0)}to{opacity:0}}.palette{flex:1;display:flex}.swatch{cursor:default;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;transition:flex .3s;display:flex}.swatch:hover{flex:1.1}.lock{cursor:pointer;opacity:.6;background:0 0;border:0;font-size:24px}.lock:hover{opacity:1}.hex{color:inherit;cursor:pointer;letter-spacing:1px;background:#00000026;border:0;border-radius:6px;padding:8px 12px;font-family:ui-monospace,monospace;font-size:14px;font-weight:700}.hex:hover{background:#0000004d}footer{color:#888;text-align:center;background:#16161d;padding:16px 32px;font-size:12px}