:root{color:#151821;font-synthesis:none;background:#f7f8fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}.brand{color:#151821;letter-spacing:-.03em;font-weight:800;text-decoration:none}header{background:#fff;border-bottom:1px solid #e6e8ee;align-items:center;gap:18px;height:64px;padding:0 max(22px,50% - 550px);display:flex}header span{color:#707585;font-size:14px}main{max-width:1000px;margin:auto;padding:64px 22px}.hero{max-width:720px;margin-bottom:36px}.eyebrow{color:#7c3aed;letter-spacing:.14em;margin:0 0 12px;font-size:12px;font-weight:800}.hero h1{letter-spacing:-.055em;margin:0 0 18px;font-size:clamp(38px,6vw,64px);line-height:1.02}.hero p:not(.eyebrow){color:#646b7a;margin:0;font-size:18px;line-height:1.65}.tool{background:#fff;border:1px solid #e3e6ec;border-radius:24px;padding:24px;box-shadow:0 16px 50px #1118270b}.drop{cursor:pointer;background:#fafbfc;border:2px dashed #d5d9e2;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:300px;display:flex}.drop img{object-fit:contain;border-radius:18px;max-width:180px;max-height:180px}.drop span{color:#8a91a0;font-size:13px}.controls,.actions{flex-wrap:wrap;align-items:end;gap:14px;margin-top:18px;display:flex}.controls label{color:#565d6d;flex-direction:column;gap:7px;font-size:13px;font-weight:700;display:flex}.controls input:not([type=color]),select,.text{background:#fff;border:1px solid #dfe2e8;border-radius:10px;min-width:180px;padding:11px 12px}.controls button,button{color:#fff;cursor:pointer;background:#151821;border:0;border-radius:10px;padding:11px 16px;font-weight:700}.secondary{color:#252a35;background:#eef0f5}.results{margin-top:28px}.sectionhead{justify-content:space-between;align-items:center;display:flex}.sectionhead h2,.info h2{font-size:20px}.sectionhead span{color:#8a91a0;font-size:13px}.grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;display:grid}.size{color:#252a35;text-align:left;background:#f5f6f9}.size small{color:#8a91a0;margin-top:5px;font-weight:500;display:block}.info{max-width:760px;padding:42px 4px}.info p{color:#697080;line-height:1.7}.colorpick{align-items:end;gap:18px;margin-bottom:22px;display:flex}.colorpick input[type=color]{cursor:pointer;background:0 0;border:0;width:84px;height:84px;padding:0}.colorpick label{margin-bottom:7px;font-size:13px;font-weight:700;display:block}.error{color:#be123c;background:#fff1f2;border-radius:10px;padding:14px}.colorresult{gap:10px;display:grid}.swatch{border-radius:16px;height:120px}.value{border:1px solid #e7e9ee;border-radius:12px;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;padding:14px;display:grid}.value span{color:#7a8190;font-size:12px;font-weight:800}.value code,.code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.value button{padding:8px 12px;font-size:12px}.palette{border-radius:18px;grid-template-columns:repeat(5,1fr);min-height:320px;margin-top:22px;display:grid;overflow:hidden}.color{justify-content:center;align-items:end;min-height:320px;padding:16px;display:flex}.color span{color:#151821;background:#fff;border-radius:8px;padding:7px 9px;font:700 12px ui-monospace,monospace;box-shadow:0 3px 12px #0002}.copyall{background:#151821;width:100%;margin-top:16px}.preview{border-radius:18px;height:360px;margin-bottom:24px}.controls{grid-template-columns:repeat(2,1fr);align-items:stretch;display:grid}.picker{align-items:center;gap:10px;display:flex}.picker input[type=color]{border:0;width:46px;height:38px;padding:0}.picker code{font-size:13px}.code{color:#fff;background:#171923;border-radius:12px;justify-content:space-between;align-items:center;gap:15px;margin-top:22px;padding:14px;display:flex;overflow:auto}.code button{color:#171923;white-space:nowrap;background:#fff}footer{text-align:center;color:#8a91a0;background:#fff;border-top:1px solid #e6e8ee;padding:28px 20px;font-size:13px}footer a{color:#151821;font-weight:800}@media (width<=650px){main{padding:42px 16px}.tool{border-radius:18px;padding:16px}.palette{grid-template-columns:1fr;min-height:0}.color{min-height:100px}.controls{grid-template-columns:1fr}.preview{height:260px}.hero h1{font-size:42px}.value{grid-template-columns:55px 1fr}.value button{grid-column:2;justify-self:start}}