/* css-gradient-generator: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.grad-code { margin: 0 0 14px; padding: 14px 16px; border-radius: 10px; background: rgb(0 0 0 / 0.25); color: #fff; font: 0.88rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.grad-preview { height: 240px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.grad-stops { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grad-stops li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px 40px; gap: 10px; align-items: center; }
.grad-stops input[type="color"] { height: 38px; }
.grad-stops output { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--slate); text-align: right; }
.grad-preset::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(15 29 58 / 0.12); }
.grad-preset { gap: 8px; }