.CssGradient_container__x0jgC{display:flex;flex-direction:column;gap:var(--spacing-6);max-width:700px;margin:0 auto}.CssGradient_previewBox__2g8mJ{width:100%;height:250px;border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:0 4px 12px rgba(0,0,0,.1);transition:background .1s ease}.CssGradient_controlsGrid__moN81{display:grid;grid-template-columns:1fr;gap:var(--spacing-4);background:var(--bg-secondary);padding:var(--spacing-6);border-radius:var(--radius-md);border:1px solid var(--border-color)}@media (min-width:640px){.CssGradient_controlsGrid__moN81{grid-template-columns:1fr 1fr}}.CssGradient_controlBox__NpmD3{display:flex;flex-direction:column;gap:var(--spacing-2);position:relative}.CssGradient_label__0atwb{font-size:.875rem;font-weight:600;color:var(--text-primary)}.CssGradient_colorRow__k_mY_{display:flex;align-items:center;gap:var(--spacing-3)}.CssGradient_colorSwatch__1I9Mv{width:50px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-color);cursor:pointer}.CssGradient_pickerPopup___fx2d{position:absolute;top:calc(100% + 10px);left:0;z-index:10;background:var(--bg-primary);border:1px solid var(--border-color);padding:10px;border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,.3)}.CssGradient_typeToggle__dto_A{display:flex;flex-direction:column;gap:var(--spacing-2)}.CssGradient_hexInput__xvYCt{flex:1;height:40px;padding:0 var(--spacing-3);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);font-size:1rem}.CssGradient_slider__cy9S6{width:100%;accent-color:var(--brand-primary)}.CssGradient_codeBox__7Y_4I{border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.CssGradient_codeHeader__Z8Ja0{display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary);padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--border-color);font-weight:600;color:var(--text-primary)}.CssGradient_copyBtn__QGrEB{background:var(--brand-primary);color:#171717;border:none;padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.CssGradient_copyBtn__QGrEB:hover{background:var(--brand-primary-hover)}.CssGradient_codeArea__kTj_D{background:#1e1e1e;padding:var(--spacing-4);color:#d4d4d4;font-family:var(--font-mono);font-size:.875rem;overflow-x:auto}.CssGradient_presets__XlhxK{display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-2)}.CssGradient_presetsTitle__Sa8A4{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.CssGradient_presetGrid__qPNRw{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.CssGradient_presetBtn__yatT5{width:60px;height:60px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s ease}.CssGradient_presetBtn__yatT5:hover{transform:scale(1.1);border-color:var(--border-color)}