.gradient-workspace,.gradient-workspace section{min-width:0}.gradient-workspace [hidden]{display:none!important}.gradient-workspace .btn{min-height:44px}.gradient-types{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.gradient-types .btn{padding-inline:8px;font-size:13px}.gradient-types [aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-paper)}.gradient-label{gap:8px;font-size:13px;display:grid}.gradient-label select{width:100%;min-width:0}.gradient-radial{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.gradient-angle{gap:8px;font-size:13px;display:grid}.gradient-angle>span{justify-content:space-between;display:flex}.gradient-angle output{color:var(--color-muted);font:12px var(--font-mono)}.gradient-angle input{width:100%;min-height:44px;accent-color:var(--color-accent)}.gradient-stops-heading,.gradient-stop-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.gradient-stops-heading h3,.gradient-stop-heading h4{margin:0;font-size:13px}.gradient-stops-heading .btn{padding-inline:10px;font-size:12px}.gradient-stops{scrollbar-gutter:stable;gap:10px;max-height:570px;display:grid;overflow:auto}.gradient-stop{border:var(--rule);background:var(--color-paper);border-radius:12px;gap:8px;min-width:0;padding:12px;display:grid}.gradient-remove{width:44px;padding:0}.gradient-color{grid-template-columns:44px minmax(0,1fr);gap:8px;display:grid}.gradient-picker{border:var(--rule);background:var(--color-paper);cursor:pointer;border-radius:8px;width:44px;height:44px;padding:4px}.gradient-color .input{width:100%;min-width:0;font-family:var(--font-mono);min-height:44px}.gradient-position{color:var(--color-muted);justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.gradient-position>div{align-items:center;gap:8px;display:flex}.gradient-position .input{width:110px;min-width:0;min-height:44px;font:14px var(--font-mono);padding-inline:8px}.gradient-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.gradient-presets .btn{color:#fff;text-shadow:0 1px 3px #0008;border-color:#0000;min-height:56px;font-size:13px}.gradient-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.gradient-preview{aspect-ratio:4/3;outline:var(--rule);outline-offset:-1px;background-color:var(--color-paper);border:0;border-radius:12px;width:100%;overflow:hidden}.gradient-workspace[data-valid=false] .gradient-preview{background-size:20px 20px;background-image:repeating-conic-gradient(#d1d5db 0% 25%,#e5e7eb 0% 50%)!important}.gradient-dimensions{font:11px var(--font-mono);opacity:.8}.gradient-output-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.gradient-output-heading h3{margin:0;font-size:13px}.gradient-output-heading .btn{padding-inline:10px;font-size:12px;position:relative}.gradient-code{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--color-paper);border:var(--rule);min-width:0;font:12px/1.7 var(--font-mono);border-radius:10px;max-height:220px;margin:0;padding:14px;overflow:auto}.gradient-code code{font:inherit}.gradient-tips{border-top:var(--rule);padding-top:12px}.gradient-tips summary{cursor:pointer;min-height:44px;font-size:13px}@media (width<=767px){.gradient-label select,.gradient-workspace .input{font-size:16px}.gradient-stop{padding:10px}.gradient-stops{max-height:460px}.gradient-output-heading h3{font-size:12px}.gradient-output-heading .btn{padding-inline:8px;font-size:11px}.gradient-radial{gap:8px}}