*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#111;background:#fafafa;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;height:100%;display:flex}header{flex-wrap:wrap;align-items:center;gap:8px 24px;padding:16px 24px;display:flex}header h1{margin:0;font-size:1.4rem}header p{color:#555;flex:1;margin:0}kbd{background:#fff;border:1px solid #ccc;border-radius:4px;padding:1px 6px;font-size:.9em}button{font:inherit;cursor:pointer}.shuffle{color:#fff;background:#111;border:none;border-radius:6px;padding:8px 20px}.palette{flex:1;display:flex}.swatch{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:12px;padding:32px 8px;transition:background .3s;display:flex}.hex{letter-spacing:.05em;background:0 0;border:none;font-size:1.3rem;font-weight:600}.lock{opacity:.85;background:0 0;border:1px solid;border-radius:20px;padding:4px 14px}@media (width<=640px){.palette{flex-direction:column}.swatch{flex-direction:row;justify-content:space-between;padding:0 16px}}