.palette-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:16px}.palette-source,.palette-result{padding:16px}.preview{position:relative;margin-top:12px;overflow:hidden;border-radius:16px;background:#f5e9ee}.preview canvas{display:none;width:100%;aspect-ratio:16/10;object-fit:cover}.preview p{display:grid;min-height:280px;place-items:center;margin:0;color:var(--muted)}.toolbar .field{min-width:130px}.result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.result-head p{margin:4px 0 0;color:var(--muted);font-size:.84rem}.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.swatch{min-height:112px;padding:10px;border:0;border-radius:15px;cursor:pointer;text-align:left;box-shadow:inset 0 -42px rgba(255,255,255,.9),0 8px 18px rgba(80,50,60,.1)}.swatch span{display:block;margin-top:68px;color:#31272b;font-weight:900}.gradient-box{height:86px;margin-top:16px;border-radius:15px;border:1px solid var(--line)}#cssOutput{width:100%;height:150px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff9fb;color:#624e56;resize:vertical}@media(max-width:760px){.palette-layout{grid-template-columns:1fr}.preview p{min-height:210px}}